成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

基于CSS3實(shí)現(xiàn)淡入（fadeIn）淡出（fadeOut）效果

XUI / 2650人閱讀

摘要：網(wǎng)上的淡入淡出效果大多是依照中和的方法使用來(lái)控制元素的透明度達(dá)到目的，但缺點(diǎn)是有輕微的卡頓感，并且運(yùn)行效率一般。思路是將淡入，淡出的效果做成預(yù)先定義好的樣式類，然后用改變?cè)氐念悂?lái)達(dá)到圖片輪播。

網(wǎng)上的淡入淡出效果大多是依照jquery中fadeIn和fadeOut的方法使用js來(lái)控制元素的透明度達(dá)到目的，但缺點(diǎn)是有輕微的卡頓感，并且運(yùn)行效率一般。 這里提供另外一個(gè)思路，即通過(guò)預(yù)先定義好的css樣式控制圖片透明度的過(guò)渡， 這種方法過(guò)渡平滑，過(guò)渡的效果基于css3的animation，所以效率高些。 思路是將淡入，淡出的效果做成預(yù)先定義好的樣式類，然后用JS改變?cè)氐念悂?lái)達(dá)到圖片輪播。（注意：因?yàn)槭腔贑SS3的animation，在移動(dòng)端做的兼容性測(cè)試表現(xiàn)不錯(cuò)，桌面端暫時(shí)沒有發(fā)現(xiàn)太大的問題。但I(xiàn)E對(duì)于css的background支持不太好，外鏈圖片有時(shí)會(huì)有問題。）
基于CSS3淡入淡出效果的圖片自動(dòng)輪播DEMO
關(guān)鍵點(diǎn)在于fadeIn和fadeOut之間的透明度切換：

/* 輪播圖片默認(rèn)的樣式*/
       .bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      -webkit-transition: opacity 2s linear;
      -moz-transition: opacity 2s linear;
      -o-transition: opacity 2s linear;
      transition: opacity 2s linear;
      opacity:0;
      filter:alpha(opacity=0);
    } 
        .fadein{
            opacity:100;
            filter:alpha(opacity=100);
        }

PS：輪播圖片默認(rèn)透明度為0，設(shè)置一個(gè)opacity=100名為fadein的類使用JS控制其與默認(rèn)透明度的切換，本篇博客的輪播方法是自動(dòng)的一張張切換，并無(wú)交互性， 使用觸控左右滑動(dòng)圖片的輪播請(qǐng)猛戳俺的另一篇博客：原生JS實(shí)現(xiàn)滑動(dòng)圖片輪播

而JS方面則是通過(guò)獲取imgs數(shù)組，輪播其中存放圖片的div， 方法是控制圖片div的class。
廢話不多說(shuō)，上代碼：

HTML（后插入的圖片顯示在前）：

CSS：

.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity 2s linear;
  -moz-transition: opacity 2s linear;
  -o-transition: opacity 2s linear;
  transition: opacity 2s linear;
  opacity:0;

}

#bg1 {
  background: url(http://i1.tietuku.com/7b57a678c8999dbas.jpg) no-repeat;
  background-size: cover;
  
}

#bg2 {
  background: url(http://i1.tietuku.com/1182f22573e6051fs.jpg) no-repeat;
  background-size: cover;
}

.fadein {
  opacity: 100;
  filter: alpha(opacity=100);
}

JS：

// 替換class達(dá)到淡入淡出的效果
function fadeIn(e) {
  e.className = "bg fadein"
};

function fadeOut(e) {
  e.className = "bg"
};
//申明圖片數(shù)組中當(dāng)前的輪播圖片
cur_img = document.getElementById("imgs").children.length - 1;
//圖片輪播函數(shù)
function turnImgs(imgs) {
    var imgs = document.getElementById("imgs").children;
    if (cur_img == 0) {
      fadeOut(imgs[cur_img]);
      cur_img = imgs.length - 1;
      fadeIn(imgs[cur_img]);
    } else {
      fadeOut(imgs[cur_img]);
      fadeIn(imgs[cur_img - 1]);
      cur_img--;
    }
  }
  //設(shè)置輪播間隔
setInterval(turnImgs, 3000);

demo中只用了兩張圖片，如果需要插入更多的圖片，可以在id=“imgs”的div中加入一個(gè)新的子div ，class加上bg即可，然后在CSS中加入該div的描述，比如HTML中加入

，然后CSS中則加入

#bg3 {
  background: url(圖片地址) no-repeat;
  background-size: cover;
}

即可。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85855.html

相關(guān)文章

  • jQuery動(dòng)畫特效

    摘要：可選的參數(shù)規(guī)定效果的時(shí)長(zhǎng)，它可以取以下值，或毫秒。五其他核心方法中停止動(dòng)畫方法用于停止動(dòng)畫或效果，在它們完成之前。默認(rèn)是，即僅停止活動(dòng)的動(dòng)畫，運(yùn)行任何排入隊(duì)列的動(dòng)畫向后執(zhí)行。這些動(dòng)畫不會(huì)開始，知道第一個(gè)完成。 本文主要跟大家分享jQuery隱藏與顯示（hide，show，toggle） 上卷與下拉（slideDown，slideUp,slideToggle） 淡入淡出（fadeOut，...

    張遷 評(píng)論0 收藏0

  • jQuery操作之效果

    摘要：，用于綁定兩個(gè)或多個(gè)事件處理器函數(shù)，以響應(yīng)被選元素的輪流的事件。用選擇器選中第二個(gè)，給它綁定事件，現(xiàn)在是顯示的，它會(huì)在一秒鐘之內(nèi)慢慢的隱藏，實(shí)現(xiàn)淡出效果。，通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)所有匹配元素的淡出效果。效果如下，，關(guān)閉頁(yè)面上所有的動(dòng)畫。 jQuery操作之效果 效果操作一共分五類：1.基本，2.滑動(dòng)，3.淡入淡出，4.自定義，5.設(shè)置showImg(https://segmentfa...

    seal_de 評(píng)論0 收藏0

  • 回味jQuery系列（2）-動(dòng)畫效果

    摘要：參數(shù)代表回調(diào)函數(shù)。參數(shù)為變化樣式的對(duì)象必傳，速度可選，回調(diào)函數(shù)可選。這是，肯定會(huì)想到采用回調(diào)函數(shù)來(lái)解決。確實(shí)可以解決問題，但是當(dāng)列隊(duì)動(dòng)畫變多時(shí)，回調(diào)函數(shù)的可讀性大大降低確實(shí)一個(gè)非常煩人的問題。提供了一個(gè)類似于回調(diào)函數(shù)的方法。 jQuery-動(dòng)畫效果淺析 動(dòng)畫可以給網(wǎng)站的用戶體驗(yàn)加分，讓網(wǎng)頁(yè)更加活潑。不過(guò)，什么東西都需要適量，簡(jiǎn)易快捷的動(dòng)畫會(huì)給網(wǎng)站加分不少。比如購(gòu)物網(wǎng)站的個(gè)人中心按鈕ho...

    IamDLY 評(píng)論0 收藏0

  • 自己整理的css3動(dòng)畫庫(kù)，附下載鏈接

    摘要：動(dòng)畫以低速開始，然后加快，在結(jié)束前變慢。在函數(shù)中自己的值。在所指定的一段時(shí)間內(nèi)，在動(dòng)畫顯示之前，應(yīng)用開始屬性值在第一個(gè)關(guān)鍵幀中定義。動(dòng)畫調(diào)用語(yǔ)法 animation: bounceIn 0.3s ease 0.2s 1 both; 按順序解釋參數(shù)： 動(dòng)畫名稱 如：bounceIn 一周期所用時(shí)間 如：0.3s 速度曲線 如：ease 值 描述 linear 動(dòng)畫從頭...

    Darkgel 評(píng)論0 收藏0

  • 讀Zepto源碼之fx_methods模塊

    摘要：所以模塊依賴于模塊，在引入前必須引入模塊。原有的方法分析見讀源碼之樣式操作方法首先調(diào)用原有的方法，將元素顯示出來(lái)，這是實(shí)現(xiàn)動(dòng)畫的基本條件。如果沒有傳遞，或者為值，則表示不需要?jiǎng)赢?，調(diào)用原有的方法即可。 fx 模塊提供了 animate 動(dòng)畫方法，fx_methods 利用 animate 方法，提供一些常用的動(dòng)畫方法。所以 fx_methods 模塊依賴于 fx 模塊，在引入 fx_m...

    junbaor 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<