在前面的文章中講了簡單的Javascript動畫效果，這篇文章主要介紹我在改變之前代碼時(shí)發(fā)現(xiàn)的一些問題及解決方法。
在前面的多物體寬度變化的例子中，我們給其增加代碼：border: 4px solid #000;我們發(fā)現(xiàn)，鼠標(biāo)移出后，寬度不是200px了，那么究竟是如何產(chǎn)生這種情況的呢？下面我們通過一個(gè)新的例子來分析
html代碼：
<div id="div1">hello</div>
css代碼：
body,div{ margin: 0px; padding: 0px; }
div{ width: 200px; height: 200px; background: red; border: 1px solid #000;}
Javascript代碼：
window.onload = function(){ startMove(); }function startMove(){ setInterval(function(){ var oDiv = document.getElementById('div1'); oDiv.style.width = oDiv.offsetWidth-1+'px'; },30)}/*此時(shí)的效果為寬度不斷增加 * 加上border: 2px solid #000;之后，不斷增大 * 原因：當(dāng)前的寬為202，減一后為201，大于200 * 改變：oDiv.offsetWidth-2 * 結(jié)果：寬永遠(yuǎn)為200px * 改變：字行內(nèi)樣式中加寬為200px<div id="div1" style="width: 200px;"></div> * 結(jié)果：改變border的值，可以得到寬度減小的效果 * 思考：使用getStyle函數(shù) */在這里，我們感覺是offsetWidth上存在問題，我們引入getStyle函數(shù)（其中的判斷分別為兼容ie和firefox），
function getStyle(obj,attr){ if(obj.currentStyle){//ie return obj.currentStyle[attr];} else{//firefox return getComputedStyle(obj,false)[attr]; }}然后我們對oDiv.style.width = oDiv.offsetWidth-1+'px';代碼進(jìn)行修改，代碼如下：
oDiv.style.width = parseInt(getStyle(oDiv,'width'))-1+'px';
在這里，得到的就是不斷減小的效果。我們繼續(xù)對代碼進(jìn)行修改
css中：
div{ font-size: 12px;color: #fff;}
Javascript中：
oDiv.style.fontSize = parseInt(getStyle(oDiv,'fontSize'))+1+'px';
此時(shí)的效果為寬度不斷減小，字體不斷增大。（前面主要是學(xué)習(xí)getStyle的用法）
在這里，我們再回到多物體動畫上，我們將之前代碼中的的obj.offsetWidth改為parseInt(getStyle(obj,'width'))，在這里我們通過圖片看一下他們間的不同：
我們可以發(fā)現(xiàn)，parseInt(getStyle(obj,'width'))出現(xiàn)了多次，我們可以將將parseInt(getStyle(obj,'width'))賦值給變量icur，這時(shí)我們得到的效果就比較好了，此時(shí)的代碼如下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,ul,li{ margin: 0px; padding: 0px; } ul,li{ list-style: none; } ul li{ width: 200px; height: 100px; background: yellow; margin-bottom: 20px; border: 4px solid #000; } </style> <script type="text/javascript"> window.onload = function(){ var aLi = document.getElementsByTagName('li'); for(var i = 0; i< aLi.length; i++){ aLi[i].timer = null; aLi[i].onmouseover = function(){ startMove(this,400); } aLi[i].onmouseout = function(){ startMove(this,200); } } } function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var icur = parseInt(getStyle(obj,'width')); //將parseInt(getStyle(obj,'width'))賦值給變量icur var speed = (iTarget - icur)/10; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(iTarget == icur){ clearInterval(obj.timer); } else{ //obj.style.width = icur+speed+'px'; obj.style['width'] = icur+speed+'px'; } },30) } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else { return getComputedStyle(obj,false)[attr]; } } </script> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body></html> 到這里，單一動畫效果實(shí)現(xiàn)了，如果我們想要第一個(gè)li改變寬度，第二個(gè)li改變高度，這里我們應(yīng)該怎樣呢？
思路：在li里面加入id，分情況實(shí)現(xiàn)，代碼：<li id="li1"></li> <li id="li2"></li>
實(shí)現(xiàn)：
window.onload = function(){ var Li1 = document.getElementById('li1'); var Li2 = document.getElementById('li2'); Li1.onmouseover = function(){ startMove(this,400); } Li1.onmouseout = function(){ startMove(this,100) } Li2.onmouseover = function(){ startMove1(this,400); } Li2.onmouseout = function(){ startMove1(this,200) }} function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var icur = parseInt(getStyle(obj,'height')); var speed = (iTarget - icur)/10; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(iTarget == icur){ clearInterval(obj.timer); } else{ obj.style['height'] = icur+speed+'px'; } },30)} function startMove1(obj,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var icur = parseInt(getStyle(obj,'width')); var speed = (iTarget - icur)/10; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(iTarget == icur){ clearInterval(obj.timer); } else{ obj.style['width'] = icur+speed+'px'; } },30)} function getStyle(obj,attr){ if(obj.currentStyle){//ie return obj.currentStyle[attr]; } else { return getComputedStyle(obj,false)[attr]; }} 這里的效果是：鼠標(biāo)在第一個(gè)時(shí)，改變高度；在第二個(gè)時(shí)，改變寬度。并且我們發(fā)現(xiàn)前面的代碼中有很多重復(fù)的，我們依然根據(jù)以前的方法，將不同的部分取出來，用參數(shù)的方法傳進(jìn)去同樣達(dá)到我們想要的效果，（這里不同的是width和height，我們用一個(gè)參數(shù)attr來傳進(jìn)去），代碼如下：
window.onload = function(){ var Li1 = document.getElementById('li1'); var Li2 = document.getElementById('li2'); Li1.onmouseover = function(){ startMove(this,'height',400); } Li1.onmouseout = function(){ startMove(this,'height',100) } Li2.onmouseover = function(){ startMove(this,'width',400); } Li2.onmouseout = function(){ startMove(this,'width',200) }} function startMove(obj,attr,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var icur = parseInt(getStyle(obj,attr)); var speed = (iTarget - icur)/10; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(iTarget == icur){ clearInterval(obj.timer); } else{ obj.style[attr] = icur+speed+'px'; } },30)}在這里，我們試著給透明度也來進(jìn)行變化，
css中：
ul li{ filter:alpha(opacity:30);opacity:0.3;}
Javascript中：
window.onload = function(){ var Li1 = document.getElementById('li1'); var Li2 = document.getElementById('li2'); Li1.onmouseover = function(){ startMove(this,'opacity',100); } Li1.onmouseout = function(){ startMove(this,'opacity',30) }}奇怪的是，居然沒有我們想要的結(jié)果
原因：假設(shè)1：寬度一般為整型，而opacity的值為0-1；假設(shè)2：opacity是沒有單位的
修改1：增加一個(gè)判斷，當(dāng)傳入的值為opacity的時(shí)候，我們執(zhí)行parseFloat，代碼如下：
var icur = 0;if(attr == 'opacity'){ icur = parseFloat(getStyle(obj,attr))*100;}else{ icur = parseInt(getStyle(obj,attr));}修改2：再增加一個(gè)判斷
if(iTarget == icur){ clearInterval(obj.timer);}else{if(attr = 'opacity'){ obj.style.filter = 'alpha(opacity:'+(icur+speed)+')'; obj.style.opacity = (icur+speed)/100;}else{obj.style[attr] = icur+speed+'px';}}修改后我們在瀏覽器下，仍能發(fā)現(xiàn)問題，就是opacity的值比1大了一點(diǎn)點(diǎn)
原因分析：計(jì)算機(jī)的運(yùn)算并不是那么準(zhǔn)確，會出現(xiàn)誤差，
修改：我們在前面增加一個(gè) Math.round，對小數(shù)部分進(jìn)行四舍五入，代碼如下
var icur = 0;if(attr == 'opacity'){ icur = Math.round(parseFloat(getStyle(obj,attr))*100);}else{ icur = parseInt(getStyle(obj,attr));}這樣，我們的效果就基本完成了，全部代碼如下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,ul,li{ margin: 0px; padding: 0px; } ul,li{ list-style: none; } ul li{ width: 200px; height: 100px; background: yellow; margin-bottom: 20px; border: 4px solid #000; filter:alpha(opacity:30); opacity:0.3; } </style> <script type="text/javascript"> window.onload = function(){ var Li1 = document.getElementById('li1'); var Li2 = document.getElementById('li2'); Li1.onmouseover = function(){ startMove(this,'opacity',100); } Li1.onmouseout = function(){ startMove(this,'opacity',30) } } function startMove(obj,attr,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var icur = 0; if(attr == 'opacity'){ icur = Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur = parseInt(getStyle(obj,attr)); } var speed = (iTarget - icur)/10; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(iTarget == icur){ clearInterval(obj.timer); } else{ if(attr = 'opacity'){ obj.style.filter = 'alpha(opacity:'+(icur+speed)+')'; obj.style.opacity = (icur+speed)/100; } else{ obj.style[attr] = icur+speed+'px'; } } },30) } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else { return getComputedStyle(obj,false)[attr]; } } </script> </head> <body> <ul> <li id="li1"></li> </ul> </body></html>這樣，我們就可以對我們的運(yùn)動進(jìn)行任意值的變化了。
其實(shí)，在不是不覺間，就已經(jīng)將一個(gè)簡單的動畫進(jìn)行了封裝，得到一個(gè)簡單的Javascript動畫庫了。后面，我們將繼續(xù)對我們Javascript庫進(jìn)行補(bǔ)充。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
