Javascript動(dòng)畫(huà)效果(2)
在前面的文章中講了簡(jiǎn)單的Javascript動(dòng)畫(huà)效果,這篇文章主要介紹我在改變之前代碼時(shí)發(fā)現(xiàn)的一些問(wèn)題及解決方法。
在前面的多物體寬度變化的例子中,我們給其增加代碼:border: 4px solid #000;我們發(fā)現(xiàn),鼠標(biāo)移出后,寬度不是200px了,那么究竟是如何產(chǎn)生這種情況的呢?下面我們通過(guò)一個(gè)新的例子來(lái)分析
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ù) */
在這里,我們感覺(jué)是offsetWidth上存在問(wèn)題,我們引入getStyle函數(shù)(其中的判斷分別為兼容ie和firefox),
function getStyle(obj,attr){ if(obj.currentStyle){//ie return obj.currentStyle[attr]; } else{//firefox return getComputedStyle(obj,false)[attr]; } }
然后我們對(duì)oDiv.style.width = oDiv.offsetWidth-1+'px';代碼進(jìn)行修改,代碼如下:
oDiv.style.width = parseInt(getStyle(oDiv,'width'))-1+'px';
在這里,得到的就是不斷減小的效果。我們繼續(xù)對(duì)代碼進(jìn)行修改
css中:
div{ font-size: 12px;color: #fff;}
Javascript中:
oDiv.style.fontSize = parseInt(getStyle(oDiv,'fontSize'))+1+'px';
此時(shí)的效果為寬度不斷減小,字體不斷增大。(前面主要是學(xué)習(xí)getStyle的用法)
在這里,我們?cè)倩氐蕉辔矬w動(dòng)畫(huà)上,我們將之前代碼中的的obj.offsetWidth改為parseInt(getStyle(obj,'width')),在這里我們通過(guò)圖片看一下他們間的不同:
我們可以發(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>
到這里,單一動(dòng)畫(huà)效果實(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ù)以前的方法,將不同的部分取出來(lái),用參數(shù)的方法傳進(jìn)去同樣達(dá)到我們想要的效果,(這里不同的是width和height,我們用一個(gè)參數(shù)attr來(lái)傳進(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) }
在這里,我們?cè)囍o透明度也來(lái)進(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) } }
奇怪的是,居然沒(méi)有我們想要的結(jié)果
原因:假設(shè)1:寬度一般為整型,而opacity的值為0-1;假設(shè)2:opacity是沒(méi)有單位的
修改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'; } }
修改后我們?cè)跒g覽器下,仍能發(fā)現(xiàn)問(wèn)題,就是opacity的值比1大了一點(diǎn)點(diǎn)
原因分析:計(jì)算機(jī)的運(yùn)算并不是那么準(zhǔn)確,會(huì)出現(xiàn)誤差,
修改:我們?cè)谇懊嬖黾右粋€(gè) Math.round,對(duì)小數(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>
這樣,我們就可以對(duì)我們的運(yùn)動(dòng)進(jìn)行任意值的變化了。
其實(shí),在不是不覺(jué)間,就已經(jīng)將一個(gè)簡(jiǎn)單的動(dòng)畫(huà)進(jìn)行了封裝,得到一個(gè)簡(jiǎn)單的Javascript動(dòng)畫(huà)庫(kù)了。后面,我們將繼續(xù)對(duì)我們Javascript庫(kù)進(jìn)行補(bǔ)充。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JavaScript實(shí)戰(zhàn)之帶收放動(dòng)畫(huà)效果的導(dǎo)航菜單
- 原生js仿jquery animate動(dòng)畫(huà)效果
- JavaScript仿flash遮罩動(dòng)畫(huà)效果
- 原生javascript實(shí)現(xiàn)勻速運(yùn)動(dòng)動(dòng)畫(huà)效果
- 九種原生js動(dòng)畫(huà)效果
- JS動(dòng)畫(huà)效果代碼3
- 圖片的左右移動(dòng),js動(dòng)畫(huà)效果實(shí)現(xiàn)代碼
- 在AngularJS應(yīng)用中實(shí)現(xiàn)一些動(dòng)畫(huà)效果的代碼
- 使用ngView配合AngularJS應(yīng)用實(shí)現(xiàn)動(dòng)畫(huà)效果的方法
- javascript制作loading動(dòng)畫(huà)效果 loading效果
相關(guān)文章
JavaScript中調(diào)用函數(shù)的4種方式代碼實(shí)例
這篇文章主要介紹了JavaScript中調(diào)用函數(shù)的4種方式代碼實(shí)例,本文分別給出方法調(diào)用模式、函數(shù)調(diào)用模式、構(gòu)造器調(diào)用模式、apply調(diào)用模式4種方式的代碼實(shí)例,需要的朋友可以參考下2015-07-07JS實(shí)現(xiàn)旋轉(zhuǎn)木馬式圖片輪播效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)旋轉(zhuǎn)木馬式圖片輪播效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01通過(guò)js示例講解時(shí)間復(fù)雜度與空間復(fù)雜度
這篇文章主要給大家介紹了關(guān)于如何通過(guò)js示例講解時(shí)間復(fù)雜度與空間復(fù)雜度的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08Javascript圖像處理—平滑處理實(shí)現(xiàn)原理
這里直接引用OpenCV 2.4+ C++ 平滑處理和OpenCV 2.4+ C++ 邊緣梯度計(jì)算的相關(guān)內(nèi)容平滑也稱(chēng)模糊, 是一項(xiàng)簡(jiǎn)單且使用頻率很高的圖像處理方法,需要了解的朋友可以參考下2012-12-12JS 實(shí)現(xiàn)列表與多選框選擇附預(yù)覽動(dòng)畫(huà)
本節(jié)為大家介紹的是用JS實(shí)現(xiàn)列表與多選框選擇,并附gif演示動(dòng)畫(huà),這個(gè)例子很詳細(xì),大家可以看看2014-10-10