快捷導(dǎo)航

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

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

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

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

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

<!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>

編寫(xiě)javascript部分，主要難點(diǎn)是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; 
 } 
 //透明度每次變化的值（步長(zhǎng)），根據(jù)目標(biāo)值和當(dāng)前值的差來(lái)決定步長(zhǎng)的正負(fù) 
 target-opa>=0?speed=1:speed=-1; 
 clearInterval(box.timer); 
 box.timer = setInterval(function (){ 
  //目標(biāo)值和當(dāng)前值差值的絕對(duì)值大于等于步長(zhǎng)的絕對(duì)值，設(shè)置透明度為當(dāng)前值加步長(zhǎ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)前值差值的絕對(duì)值小于步長(zhǎng)的絕對(duì)值，剩余的距離一步到位， 
  //設(shè)置透明度直接為目標(biāo)值，同時(shí)清除定時(shí)器 
  else{ 
   box.style.opacity=target/100; 
   box.style.filter='alpha(opacity:'+target+')'; 
   clearInterval(box.timer); 
  } 
  //直接對(duì)透明度參數(shù)進(jìn)行加步長(zhǎng)的運(yùn)算，避免每次都要獲取當(dāng)前透明度 
  opa=opa+speed; 
 },30); 
}

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

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

1、IE，雖然在在IE下不支持opacity屬性，但是我們是可以通過(guò)box.currentStyle['opacity']獲取到它的值的，同時(shí)我們?cè)趯?xiě)入的時(shí)候也會(huì)將給opacity的值寫(xiě)入css中，盡管IE不會(huì)因?yàn)閛pacity值的改變而變化透明度。
2、其他瀏覽器，其他瀏覽器是支持opacity屬性，所以我們操作相對(duì)簡(jiǎn)單了許多，寫(xiě)入和讀取都針對(duì)opacity即可。

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

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

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

您可能感興趣的文章: