基于CSS3實現淡入（fadeIn）淡出（fadeOut）效果

XUI 發布于2019-08-21 10:36 / 2619人閱讀

摘要：網上的淡入淡出效果大多是依照中和的方法使用來控制元素的透明度達到目的，但缺點是有輕微的卡頓感，并且運行效率一般。思路是將淡入，淡出的效果做成預先定義好的樣式類，然后用改變元素的類來達到圖片輪播。

網上的淡入淡出效果大多是依照jquery中fadeIn和fadeOut的方法使用js來控制元素的透明度達到目的，但缺點是有輕微的卡頓感，并且運行效率一般。這里提供另外一個思路，即通過預先定義好的css樣式控制圖片透明度的過渡，這種方法過渡平滑，過渡的效果基于css3的animation，所以效率高些。思路是將淡入，淡出的效果做成預先定義好的樣式類，然后用JS改變元素的類來達到圖片輪播。（注意：因為是基于CSS3的animation，在移動端做的兼容性測試表現不錯，桌面端暫時沒有發現太大的問題。但IE對于css的background支持不太好，外鏈圖片有時會有問題。）
基于CSS3淡入淡出效果的圖片自動輪播DEMO
關鍵點在于fadeIn和fadeOut之間的透明度切換：

/* 輪播圖片默認的樣式*/
       .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：輪播圖片默認透明度為0，設置一個opacity=100名為fadein的類使用JS控制其與默認透明度的切換，本篇博客的輪播方法是自動的一張張切換，并無交互性，使用觸控左右滑動圖片的輪播請猛戳俺的另一篇博客：原生JS實現滑動圖片輪播

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

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達到淡入淡出的效果
function fadeIn(e) {
  e.className = "bg fadein"
};

function fadeOut(e) {
  e.className = "bg"
};
//申明圖片數組中當前的輪播圖片
cur_img = document.getElementById("imgs").children.length - 1;
//圖片輪播函數
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--;
    }
  }
  //設置輪播間隔
setInterval(turnImgs, 3000);

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

，然后CSS中則加入

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

即可。

GPU云服務器云服務器淡出淡入淡入淡出淡入淡出顯示 html頁面淡入淡出

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85855.html

jQuery動畫特效

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

張遷 2019-08-22 10:54 評論0 收藏0
jQuery操作之效果

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

seal_de 2019-08-21 11:47 評論0 收藏0
回味jQuery系列（2）-動畫效果

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

IamDLY 2019-08-20 10:33 評論0 收藏0
自己整理的css3動畫庫，附下載鏈接

摘要：動畫以低速開始，然后加快，在結束前變慢。在函數中自己的值。在所指定的一段時間內，在動畫顯示之前，應用開始屬性值在第一個關鍵幀中定義。動畫調用語法 animation: bounceIn 0.3s ease 0.2s 1 both; 按順序解釋參數：動畫名稱如：bounceIn 一周期所用時間如：0.3s 速度曲線如：ease 值描述 linear 動畫從頭...

Darkgel 2019-04-23 14:38 評論0 收藏0
讀Zepto源碼之fx_methods模塊

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

junbaor 2019-08-21 16:59 評論0 收藏0