快捷導(dǎo)航

基于原生js淡入淡出函數(shù)封裝（兼容IE）

更新時間：2016年10月20日 11:41:17 作者：張飛翔

這篇文章主要為大家詳細(xì)介紹了基于原生js淡入淡出函數(shù)封裝，可兼容IE，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在開發(fā)的過程中，我們要做淡入淡出效果的話，我們完全可以使用jQuery的fadeTo()方法。但是我們的目的不只是會用，而是理解程序底層的邏輯。這篇文章主要就是利用原生的javascript實現(xiàn)淡入淡出的效果。

構(gòu)建框架，基本沒難度。

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="UTF-8"> 
  <title>透明度函數(shù)的封裝</title> 
  <style type="text/css"> 
   #box{ 
    width: 200px; 
    height: 200px; 
    background: red; 
    margin: 50px auto; 
    opacity: .3; 
    filter: alpha(opacity:30); 
   } 
  </style> 
 </head> 
 <body> 
  <div id="box"></div> 
  <script src="toumingdu.js" type="text/javascript" charset="utf-8"></script> 
 </body> 
</html>

編寫javascript部分，主要難點是changeOpacity()函數(shù)。

window.onload = function (){ 
 var box = document.getElementById('box'); 
 box.onmouseover = function (){ 
  changeOpacity(this,100); 
 } 
 box.onmouseout = function (){ 
  changeOpacity(this,30); 
   
 } 
} 
/** 
 * 
 * @param {Object} box 要變化透明度的元素 
 * @param {Object} target 透明度的目標(biāo)值（100為最高） 
 */ 
function changeOpacity(box,target){ 
 var opa; 
 var speed; 
 if(box.currentStyle){ 
  //判斷瀏覽器類型，此類型為IE瀏覽器，即使IE不支持opacity屬性，但是仍然可以獲取值 
  opa = box.currentStyle['opacity']*100; 
 } 
 else{//其他瀏覽器 
  opa = getComputedStyle(box,false)['opacity']*100; 
 } 
 //透明度每次變化的值（步長），根據(jù)目標(biāo)值和當(dāng)前值的差來決定步長的正負(fù) 
 target-opa>=0?speed=1:speed=-1; 
 clearInterval(box.timer); 
 box.timer = setInterval(function (){ 
  //目標(biāo)值和當(dāng)前值差值的絕對值大于等于步長的絕對值，設(shè)置透明度為當(dāng)前值加步長 
  if(Math.abs(target-opa)>=Math.abs(speed)){ 
   box.style.opacity=(opa+speed)/100; 
   box.style.filter='alpha(opacity:'+(opa+speed)+')'; 
  } 
  //目標(biāo)值和當(dāng)前值差值的絕對值小于步長的絕對值，剩余的距離一步到位， 
  //設(shè)置透明度直接為目標(biāo)值，同時清除定時器 
  else{ 
   box.style.opacity=target/100; 
   box.style.filter='alpha(opacity:'+target+')'; 
   clearInterval(box.timer); 
  } 
  //直接對透明度參數(shù)進行加步長的運算，避免每次都要獲取當(dāng)前透明度 
  opa=opa+speed; 
 },30); 
}

這個透明度函數(shù)的原理在大體上是跟運動函數(shù)相同的?？偨Y(jié)為三步：
1、獲取當(dāng)前值，根據(jù)目標(biāo)值和當(dāng)前值確定步長；
2、變化的過程，每次變化一個值（漸變動畫和透明度其步長為不同的值，而勻速動畫和透明度步長為定值）；
3、判斷是否達到目標(biāo)值，達到則清除定時器，結(jié)束。

所以如果原理弄不清楚可以看一下另一篇文章javascript勻速動畫和緩沖動畫。
而在理解原理的情況下最大的難點應(yīng)該是當(dāng)前透明度的獲取了（賦值比較簡單）。獲取透明度的值我們要考慮兩種情況：

1、IE，雖然在在IE下不支持opacity屬性，但是我們是可以通過box.currentStyle['opacity']獲取到它的值的，同時我們在寫入的時候也會將給opacity的值寫入css中，盡管IE不會因為opacity值的改變而變化透明度。
2、其他瀏覽器，其他瀏覽器是支持opacity屬性，所以我們操作相對簡單了許多，寫入和讀取都針對opacity即可。

接下來細(xì)講在IE瀏覽器中的操作：

首先我們的css文件中有兩個屬性值在我們的操作中是有用的 opacity: .3; filter: alpha(opacity:30); 顯然我們很難獲取filter屬性中的opacity值（我不會！），但是如果我們使用currentStyle來獲取opacity是比較簡單的。所以我進行了測試發(fā)現(xiàn)，盡管IE不支持這個屬性，但是這個屬性值的讀取和寫入時完全沒問題的，所以，問題就迎刃而解了！我們通過opacity可以讀取當(dāng)前透明度，然后通過filter改變透明度，同時，我們改變opacity的值（不僅是為了兼容其他瀏覽器，同時我們寫入以后IE瀏覽器中在下次移入的時候還可以獲取當(dāng)前的透明度，否則的話獲取的是初始的opacity值）。那么下面不就和動畫那個問題一樣了？

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: