基於原生javascript的淡入淡出函數封裝（兼容IE）

時間 2019-12-06

標籤基於原生 javascript 淡入淡出函數封裝兼容欄目 JavaScript 简体版

原文原文鏈接

在開發的過程當中，咱們要作淡入淡出效果的話，咱們徹底可使用jQuery的fadeTo()方法。可是咱們的目的不僅是會用，而是理解程序底層的邏輯。這篇文章主要就是利用原生的javascript實現淡入淡出的效果。javascript

構建框架，基本沒難度。css

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>透明度函數的封裝</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()函數。

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 透明度的目標值（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;
	}
	//透明度每次變化的值（步長），根據目標值和當前值的差來決定步長的正負
	target-opa>=0?speed=1:speed=-1;
	clearInterval(box.timer);
	box.timer = setInterval(function (){
		//目標值和當前值差值的絕對值大於等於步長的絕對值，設置透明度爲當前值加步長
		if(Math.abs(target-opa)>=Math.abs(speed)){
			box.style.opacity=(opa+speed)/100;
			box.style.filter='alpha(opacity:'+(opa+speed)+')';
		}
		//目標值和當前值差值的絕對值小於步長的絕對值，剩餘的距離一步到位，
		//設置透明度直接爲目標值，同時清除定時器
		else{
			box.style.opacity=target/100;
			box.style.filter='alpha(opacity:'+target+')';
			clearInterval(box.timer);
		}
		//直接對透明度參數進行加步長的運算，避免每次都要獲取當前透明度
		opa=opa+speed;
	},30);
}

這個透明度函數的原理在大致上是跟運動函數相同的。總結爲三步：

一、獲取當前值，根據目標值和當前值肯定步長；html

二、變化的過程，每次變化一個值（漸變更畫和透明度其步長爲不一樣的值，而勻速動畫和透明度步長爲定值）；java

三、判斷是否達到目標值，達到則清除定時器，結束。瀏覽器

因此若是原理弄不清楚能夠看一下另外一篇文章javascript勻速動畫和緩衝動畫。框架

而在理解原理的狀況下最大的難點應該是當前透明度的獲取了（賦值比較簡單）。獲取透明度的值咱們要考慮兩種狀況：函數

一、IE，雖然在在IE下不支持opacity屬性，可是咱們是能夠經過box.currentStyle['opacity']獲取到它的值的，同時咱們在寫入的時候也會將給opacity的值寫入css中，儘管IE不會由於opacity值的改變而變化透明度。測試

二、其餘瀏覽器，其餘瀏覽器是支持opacity屬性，因此咱們操做相對簡單了許多，寫入和讀取都針對opacity便可。動畫

接下來細講在IE瀏覽器中的操做：this

首先咱們的css文件中有兩個屬性值在咱們的操做中是有用的 opacity: .3; filter: alpha(opacity:30); 顯然咱們很難獲取filter屬性中的opacity值（我不會！），可是若是咱們使用currentStyle來獲取opacity是比較簡單的。因此我進行了測試發現，儘管IE不支持這個屬性，可是這個屬性值的讀取和寫入時徹底沒問題的，因此，問題就迎刃而解了！咱們經過opacity能夠讀取當前透明度，而後經過filter改變透明度，同時，咱們改變opacity的值（不只是爲了兼容其餘瀏覽器，同時咱們寫入之後IE瀏覽器中在下次移入的時候還能夠獲取當前的透明度，不然的話獲取的是初始的opacity值）。那麼下面不就和動畫那個問題同樣了？