您現在的位置: 365建站網 > 365學習 > CSS3/js/jquery實現淡入(fadeIn)淡出(fadeOut)效果的方法

CSS3/js/jquery實現淡入(fadeIn)淡出(fadeOut)效果的方法

文章來源:365jz.com     點擊數:728    更新時間:2017-12-26 09:36   參與評論
基于CSS3實現淡入(fadeIn)淡出(fadeOut)效果:

淡入淡出效果大多是依照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(后插入的圖片顯示在前):

<div id="imgs">
  <div id="bg1" class="bg"></div>
  <div id="bg2" class="bg"></div>
</div>

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中加入<div id="bg3" class="bg"></div>,然后CSS中則加入

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


原生js實現fadein 和 fadeout淡入淡出效果:

js里面設置DOM節點透明度的函數屬性:filter= "alpha(opacity=" + value+ ")"(兼容ie)和opacity=value/100(兼容FF和GG)。

先來看看設置透明度的兼容性代碼:
 
function setOpacity(ele, opacity) { 
if (ele.style.opacity != undefined) { 
///兼容FF和GG和新版本IE 
ele.style.opacity = opacity / 100; 

} else { 
///兼容老版本ie 
ele.style.filter = "alpha(opacity=" + opacity + ")"; 
} 
} 

關于有的小伙伴這樣寫:
 
function setOpacity(ele, opacity) { 
if (document.all) { 
///兼容ie 
ele.style.filter = "alpha(opacity=" + opacity + ")"; 
} 
ele { 
///兼容FF和GG 
ele.style.opacity = opacity / 100; 
} 
} 

我想說這樣在IE10下運行有問題,點了之后沒反應。因為IE10支持opacity屬性不支持filter了,這個方法不可取。

fadein 函數代碼:
 
function fadein(ele, opacity, speed) { 
if (ele) { 
var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity; 
v < 1 && (v = v * 100); 
var count = speed / 1000; 
var avg = count < 2 ? (opacity / count) : (opacity / count - 1); 
var timer = null; 
timer = setInterval(function() { 
if (v < opacity) { 
v += avg; 
setOpacity(ele, v); 
} else { 
clearInterval(timer); 
} 
}, 500); 
} 
} 

fadeout 函數代碼:
 
function fadeout(ele, opacity, speed) { 
if (ele) { 
var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity || 100; 
v < 1 && (v = v * 100); 
var count = speed / 1000; 
var avg = (100 - opacity) / count; 
var timer = null; 
timer = setInterval(function() { 
if (v - avg > opacity) { 
v -= avg; 
setOpacity(ele, v); 
} else { 
clearInterval(timer); 
} 
}, 500); 
} 
} 

下面給一個demo示例:
 
<!DOCTYPE html> 
<html XMLns="http://www.w3.org/1999/XHTML"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<script type="text/JavaScript" src="fade.js"></script> 
<script type="text/javascript"> 

window.onload = function () { 


document.getElementById('Button1').onclick = function () { 

fadeout(document.getElementById('DV'), 0, 6000); 

} 
document.getElementById('Button2').onclick = function () { 

fadein(document.getElementById('DV'), 80, 6000); 

} 
} 
</script> 
</head> 
<body> 

<div id="DV" style="background-color: green; width: 400px; height: 400px;"></div> 
<input id="Button1" type="button" value="button" /> 
<input id="Button2" type="button" value="button" /> 

</body> 
</html> 

Jquery中淡入淡出效果fadeIn()、fadeOut()、fadeToggle()、fadeTo()的使用方法:

一、基本語法

1、fadeIn淡入、fadeOut淡出、fadeToggle淡入淡出切換(已經淡出點擊淡入,或者相反):

$(selector).fadeIn(duration,complete); 

$(selector).fadeOut(duration,complete); 

$(selector).fadeToggle(duration,complete); 

可選的 speed 參數規定效果的時長。它可以取以下值:"slow"(200ms)、"fast"(600ms) 或毫秒?!灸J為400ms】
可選的 callback 參數是 fading 完成后所執行的函數名稱。

2、fadeTo:jQuery fadeTo() 方法允許漸變為給定的不透明度(值介于 0 與 1 之間)。

$(selector).fadeTo(speed,opacity,callback); 

必需的 speed 參數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置為給定的不透明度(值介于 0 與 1 之間)。
可選的 callback 參數是該函數完成后所執行的函數名稱。

二、使用方法

1、內聯調用(匿名函數)

<!DOCTYPE html>   
<html>   
<head>   
    <meta charset="utf-8" /> 
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>   
    <script>   
        $(document).ready(function(){   
            $("button").click(function(){   
                $("#div1").fadeIn();   
                $("#div2").fadeIn("slow");   
                $("#div3").fadeIn(3000, function(){ 
                    document.getElementById("pp").innerHTML = "效果出現了!"; 
                });   
            });   
        });   
    </script>   
</head>   
   
<body>   
    <p>演示帶有不同參數的 fadeIn() 方法。</p>   
    <p id="pp">Testing</p>   
    <button>點擊這里,使三個矩形淡入</button>   
    <br><br>   
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>   
    <br>   
    <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>   
    <br>   
    <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>   
</body>   
</html>   

即直接在callback處寫函數。
2、外部調用

<!DOCTYPE html> 
<html
<head
    <meta charset="utf-8" /> 
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script
    <script type="text/javascript"> 
        function myFunc(){ 
            document.getElementById("pp").innerHTML = "效果也出現了!"; 
        }; 
        $(document).ready(function(){ 
        $("button").click(function(){ 
            $("#div1").fadeIn("slow"); 
            $("#div2").fadeIn("fast"); 
                    $("#div3").fadeIn(3000, myFunc); 
        }); 
        }); 
    </script
</head
 
<body
    <p>演示帶有不同參數的 fadeIn() 方法。</p
    <p id="pp">Testing</p
    <button>點擊這里,使三個矩形淡入</button
    <br><br
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div
    <br
    <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div
    <br
    <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div
</body
</html

三、新API

點擊參考 新API參數有三個,而callback(complete)參數是最后一個,那么為什么可以正確執行呢?
這是JS特性之一,以前沒見過這樣的函數調用(因為都有默認值),而且發現我根本沒有把myFunc函數傳遞給Jquery函數!這必須深究一下,So JS函數到底是怎么回事?

四、JS函數重載

有過C系列語言學習經歷的都知道,函數傳遞參數都會進行一致性檢查,你傳遞多少個參數,參數的類型都會檢查。但是由上面的例子可以看出,javascript卻沒有這樣的一致性檢查!多傳、少傳好像他都能接受。驗證過后確定確實是這樣的,傳遞很多個參數都可以。
還有一個問題是好像間隔傳遞都行?!這就很奇葩了,那么原因是什么呢?想了很久也沒想明白!查看源碼,發現很多jQuery.extend方法,那么確定了:原因是函數重載。但是我們注意到JS和C++的不同,C++會有參數檢查,多了不行,所以可以直接定義多個參數類型或者個數不同的同名函數實現重載,JS卻不管你有多少,只管前面的有效參數。那么怎么實現JS的函數重載?有很多方法!
1、利用arguments實現;
2、利用typeof進行參數類型判斷;
但是這兩種方法有很大的局限性,要是處理的參數很多,重載邏輯豈不是很復雜???那么有沒有好的方法呢?
最終發現暫時還沒有極好的方法,但是看到幾篇還不錯的文章

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (728人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 非洲人粗长硬配种视频| 最近2018中文字幕2019国语| 亚洲大乳高潮日本专区| av无码波多野结衣在线看| 中文字幕精品无码亚洲字幕资源网| 国产精品第一区揄拍| 黄在线看片免费人成视频| 高清freesexmovies性tv出水| 男女性高爱潮视频| 中文字幕乱码免费| 老湿机免费体10分钟t| 欧美色视频日本片免费| 大香伊在线国产观看| 毛茸茸厕所偷窥xxxx| 免费 在线 av 日本| 乱色视频中文字幕| 玩弄初次红杏出墙少妇| 同性男男性娇喘视频网站| 欧美操逼片| 好紧好大快点舒服使劲小说| 黑人变态强奷娇妻| 国模冰莲自慰肥美胞极品人体图| 成 人 社区在线视频| 欧美在线看欧美视频免费| 校长办公室岔开腿呻吟| 精品国产三级a∨在线| 久久精品人人做人人爽老司机| 老师好棒再大点| 免费国产亚洲视频在线播放| 日日擼夜夜擼在线视频| 国产女与黑人在线精品| http://www.pafris.com