在做頁面中，多數情況下都會遇到頁面上做動畫效果，我們大部分做動畫的時候都是使用框架來做（比如jquery），這里我介紹下如何讓通過原生的js來實現像框架一樣的動畫效果！
1、勻速動畫效果
說明：勻速動畫就是動畫的效果從開始到結束每次執行的速度都是一致的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>勻速動畫</title><style type="text/css"> html,body{margin:0;padding:0;} div{margin:0;padding:0;} .odiv{width:200px; height:200px; background:#f00; position:relative; left:-200px; top:100px;} .sdiv{width:20px; height:60px; background:#00f; position:absolute; top:70px; right:-20px;}</style></head><body><div id="odiv" class="odiv"> <div id="sdiv" class="sdiv"> </div></div></body></html><script language="javascript">window.onload = function(){ var odiv = document.getElementById('odiv'); odiv.onmouseover = function(){ startMover(0); } odiv.onmouseout = function(){ startMover(-200); }}var timer = null;function startMover(itarget){//目標值 clearInterval(timer);//執行當前動畫同時清除之前的動畫 var odiv = document.getElementById('odiv'); timer = setInterval(function(){ var speed = 0; if(odiv.offsetLeft > itarget){ speed = -1; } else{ speed = 1; } if(odiv.offsetLeft == itarget){ clearInterval(timer); } else{ odiv.style.left = odiv.offsetLeft+speed+'px'; } },30);}//注明：offsetWidth = width+padding+border//offsetHeight = height+padding+border//offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)//offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)/*offsetLeft=(offsetParent的padding-left)+(中間元素的offsetWidth)+(當前元素的margin-left)。offsetTop=(offsetParent的padding-top)+(中間元素的offsetHeight)+(當前元素的margin-top)。當offsetParent為body時情況比較特殊:在IE8/9/10及Chrome中，offsetLeft = (body的margin-left)+(body的border-width)+(body的padding-left)+(當前元素的margin-left)。在FireFox中，offsetLeft = (body的margin-left)+(body的padding-left)+(當前元素的margin-left)。offsetParent屬性返回一個對象的引用，這個對象是距離調用offsetParent的元素最近的（在包含層次中最靠近的），并且是已進行過CSS定位的容器元素。 如果這個容器元素未進行CSS定位, 則offsetParent屬性的取值為根元素的引用?？偟膩碚f兩條規則：1、如果當前元素的父級元素沒有進行CSS定位（position為absolute或relative），offsetParent為body。2、如果當前元素的父級元素中有CSS定位（position為absolute或relative），offsetParent取最近的那個父級元素。*/</script>2、緩沖動畫
說明：緩沖動畫就是動畫到結束或這開始的時候，速度是隨著動畫執行的進度動態變化的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>緩沖動畫</title><style type="text/css"> html,body{margin:0;padding:0;} div{margin:0;padding:0;} .odiv{width:200px; height:200px; background:#f00; position:relative; left:-200px; top:100px;} .sdiv{width:20px; height:60px; background:#00f; position:absolute; top:70px; right:-20px;}</style></head><body><div id="odiv" class="odiv"> <div id="sdiv" class="sdiv"> </div></div></body></html><script language="javascript">window.onload = function(){ var odiv = document.getElementById('odiv'); odiv.onmouseover = function(){ startMover(0); } odiv.onmouseout = function(){ startMover(-200); }}var timer = null;function startMover(itarget){//速度和目標值 clearInterval(timer);//執行當前動畫同時清除之前的動畫 var odiv = document.getElementById('odiv'); timer = setInterval(function(){ var speed = (itarget-odiv.offsetLeft)/10;//緩沖動畫的速度參數變化值 //如果速度是大于0，說明是向右走，那么就向上取整 speed = speed>0?Math.ceil(speed):Math.floor(speed); //Math.floor();向下取整 if(odiv.offsetLeft == itarget){ clearInterval(timer); } else{ //clientLeft 返回對象的offsetLeft屬性值和到當前窗口左邊的真實值之間的距離 odiv.style.left = odiv.offsetLeft+speed+'px'; } },30);}</script>3、透明度動畫
說明：處理元素透明效果的動畫
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>透明度動畫</title><style type="text/css"> html,body{margin:0;padding:0;} div{margin:0;padding:0;} .odiv{width:200px; height:200px; background:#f00; position:relative; left:0px; top:100px;opacity:0.3; filter:alpha(opacity:30); float:left; margin:10px;}</style></head><body><div id="odiv" class="odiv"></div></body></html><script language="javascript">window.onload = function(){ var odiv = document.getElementsByTagName('div'); for(var i=0;i<odiv.length;i++) { odiv[i].onmouseover = function(){ startOP(this,100); } odiv[i].onmouseout = function(){ startOP(this,30); } odiv[i].timer = null;//事先定義 odiv[i].alpha = null;//事先定義 //這里發現一個問題，對象的動畫屬性可以不定義，但是透明度屬性必須定義，否則報錯 }}function startOP(obj,utarget){ clearInterval(obj.timer);//先關閉定時器 obj.timer = setInterval(function(){ var speed = 0; if(obj.alpha>utarget){ speed = -10; } else{ speed = 10; } obj.alpha = obj.alpha+speed; if(obj.alpha == utarget){ clearInterval(obj.timer); } obj.style.filter = 'alpha(opacity:'+obj.alpha+')';//基于IE的 obj.style.opacity = parseInt(obj.alpha)/100; },30); }</script>4、多物體動畫
說明：多個物體在一起執行的動畫效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>多物體動畫</title><style type="text/css">body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;} table {border-collapse:collapse;border-spacing:0;} fieldset,img {border:0} address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal} ol,ul {list-style:none} caption,th,td{text-align:center} h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal} q:before,q:after {content:''} abbr,acronym { border:0}.odiv{position:relative;}.odiv ul li{width:200px; height:100px; background:yellow; margin-bottom:20px;}</style></head><body><div id="odiv" class="odiv"> <ul> <li></li> <li></li> <li></li> </ul></div></body></html><script language="javascript">window.onload = function(){ var olist = document.getElementsByTagName('li'); for(var i=0; i<olist.length;i++) { olist[i].onmouseover = function(){ startmov(this,400); }; olist[i].onmouseleave = function(){ startmov(this,200); }; olist[i].timer = null; } function startmov(obj,itarget){ clearInterval(obj.timer);//執行動畫之前清除動畫 obj.timer = setInterval(function(){ var speed =0; speed = (itarget - obj.offsetWidth)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth == itarget){ clearInterval(obj.timer); } else{ obj.style.width = obj.offsetWidth+speed+'px'; } },30); }}//offsetWidth獲取的是元素實際的寬度（包括邊框和內邊距）//只要是多物體運動，所有的屬性都不能共用</script>5、獲取樣式動畫
說明:這里的獲取樣式是通過計算出來元素的樣式，然后通過這個計算出來的結果來操作元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>樣式動畫</title><style type="text/css">body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;} table {border-collapse:collapse;border-spacing:0;} fieldset,img {border:0} address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal} ol,ul {list-style:none} caption,th,td{text-align:center} h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal} q:before,q:after {content:''} abbr,acronym { border:0}.odiv{position:relative;width:200px; height:200px; border:2px solid #000; background:red; font-size:20px;}</style></head><body><div id="odiv" class="odiv"> hjshfjdfsdfhsdj</div></body></html><script language="javascript">/*currentStyle：獲取計算后的樣式，也叫當前樣式、最終樣式。優點：可以獲取元素的最終樣式，包括瀏覽器的默認值，而不像style只能獲取行間樣式，所以更常用到。注意：不能獲取復合樣式如background屬性值，只能獲取單一樣式如background-color等。alert (oAbc.currentStyle);非常遺憾的是，這個好使的東西也不能被各大瀏覽器完美地支持。準確地說，在我測試的瀏覽器中，IE8和Opera 11彈出了“object CSSStyleDeclaration”；FF 12、chrome 14、safari 5則彈出“undefined”。雖然currentStyle無法適用于所有瀏覽器，但是可以根據以上測試的結果來區分開支持、不支持的瀏覽器，然后再找到兼容的寫法。var oAbc = document.getElementById("abc");if(oAbc.currentStyle) { //IE、Opera alert("我支持currentStyle");} else { //FF、chrome、safari alert("我不支持currentStyle");}其實在FF瀏覽器中我們可以使用getComputedStyle(obj,false)來達到與IE下currentStyle相同的效果。getComputedStyle(obj,false)：在FF新版本中只需要第一個參數，即操作對象，第二個參數寫“false”也是大家通用的寫法，目的是為了兼容老版本的火狐瀏覽器。兼容寫法：var oAbc = document.getElementById("abc");if(oAbc.currentStyle) { //IE、Opera //alert("我支持currentStyle"); alert(oAbc.currentStyle.width);} else { //FF、chrome、safari //alert("我不支持currentStyle"); alert(getComputedStyle(oAbc,false).width);}一個空白頁面中body的id=”abc”，測試以上代碼，IE和Opera彈出“auto”，其它三款瀏覽器則彈出“***px”。雖然結果不同，但是可以發現chrome和safari也都和火狐一樣，順利地讀取到了屬性值。不支持currentStyle的三款瀏覽器(FF、chrome、safari)，都是支持getComputedStyle的。結果表明：對瀏覽器是否支持currentStyle的判斷 + getComputedStyle，就可以做到兼容各主流瀏覽器的效果。而且兼容寫法并不復雜，你掌握了嗎？^_^支持currentStyle：IE、Opera支持getComputedStyle：FireFox、Chrome、Safari注意最后的彈出內容，currentStyle返回瀏覽器的默認值”auto”，而getComputedStyle則返回具體的值”**px”。這應該是兩者的一個小差異，有興趣的童鞋可以一起交流研究下。*/window.onload = function(){ var odiv = document.getElementById('odiv'); odiv.onmouseover = function(){ startMov(this); }; function startMov(obj){ setInterval(function(){ obj.style.width = parseInt(getStyle(obj,'width'))+1+'px'; obj.style.fontSize = parseInt(getStyle(obj,'fontSize'))+1+'px'; },30); } function getStyle(obj,attr) { if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } }}//offsetWidth獲取的是元素實際的寬度（包括邊框和內邊距）//只要是多物體運動，所有的屬性都不能共用</script>6、多物體復雜動畫
說明：多物體復雜動畫可以控制元素的不同屬性變化來實現動畫效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>多物體復雜動畫</title><style type="text/css">body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;} table {border-collapse:collapse;border-spacing:0;} fieldset,img {border:0} address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal} ol,ul {list-style:none} caption,th,td{text-align:center} h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal} q:before,q:after {content:''} abbr,acronym { border:0}.odiv{position:relative;}.odiv ul li{width:200px; height:100px; background:yellow; margin-bottom:20px; border:2px solid #000;}</style></head><body><div id="odiv" class="odiv"> <ul> <li id="li1"></li> <li id="li2"></li> </ul></div></body></html><script language="javascript">window.onload = function(){ var li1 = document.getElementById('li1'); var li2 = document.getElementById('li2'); li1.onmouseover = function(){ startMov(this,400,'width'); }; li1.onmouseout = function(){ startMov(this,200,'width'); }; li2.onmouseover = function(){ startMov(this,200,'height'); }; li2.onmouseout = function(){ startMov(this,100,'height'); }; function startMov(obj,itarget,attr){ clearInterval(obj.timer);//執行動畫之前清除動畫 obj.timer = setInterval(function(){ var icur = parseInt(getStyle(obj,attr)); var speed =0; speed = (itarget - icur)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(icur == itarget){ clearInterval(obj.timer); } 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]; } }}//offsetWidth獲取的是元素實際的寬度（包括邊框和內邊距）//只要是多物體運動，所有的屬性都不能共用</script>7、多物體復雜動畫（帶透明度的）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>多物體復雜動畫(帶透明度的)</title><style type="text/css">body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;} table {border-collapse:collapse;border-spacing:0;} fieldset,img {border:0} address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal} ol,ul {list-style:none} caption,th,td{text-align:center} h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal} q:before,q:after {content:''} abbr,acronym { border:0}.odiv{position:relative;}.odiv ul li{width:200px; height:100px; background:yellow; margin-bottom:20px; border:2px solid #000;}#li1{opacity:0.3;filter:alpha(opacity:30);}</style></head><body><div id="odiv" class="odiv"> <ul> <li id="li1"></li> <li id="li2"></li> </ul></div></body></html><script language="javascript">window.onload = function(){ var li1 = document.getElementById('li1'); var li2 = document.getElementById('li2'); li1.onmouseover = function(){ startMov(this,100,'opacity'); }; li1.onmouseout = function(){ startMov(this,30,'opacity'); }; li2.onmouseover = function(){ startMov(this,200,'height'); }; li2.onmouseout = function(){ startMov(this,100,'height'); } li1.timer = null; li2.timer = null; function startMov(obj,itarget,attr){ 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 =0; speed = (itarget - icur)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(icur == itarget){ 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]; } }}//offsetWidth獲取的是元素實際的寬度（包括邊框和內邊距）//只要是多物體運動，所有的屬性都不能共用</script>8、鏈式動畫
說明：鏈式動畫就是當前動畫執行完成后執行下一個動畫效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>鏈式動畫</title><style type="text/css">body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;} table {border-collapse:collapse;border-spacing:0;} fieldset,img {border:0} address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal} ol,ul {list-style:none} caption,th,td{text-align:center} h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal} q:before,q:after {content:''} abbr,acronym { border:0}.odiv{position:relative;}.odiv ul li{width:200px; height:100px; background:yellow; margin-bottom:20px; border:2px solid #000;}#li1{opacity:0.3;filter:alpha(opacity:30);}</style></head><body><div id="odiv" class="odiv"> <ul> <li id="li1"></li> </ul></div></body></html><script language="javascript">window.onload = function(){ var li1 = document.getElementById('li1'); li1.onmouseover = function(){ startMov(li1,400,'width',function(){ startMov(li1,200,'height',function(){ startMov(li1,100,'opacity'); }); }); }; li1.onmouseout = function(){ startMov(li1,30,'opacity',function(){ startMov(li1,100,'height',function(){ startMov(li1,100,'width'); }); }); }; li1.timer = null; function startMov(obj,itarget,attr,fn){//fn回調函數 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 =0; speed = (itarget - icur)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(icur == itarget){ clearInterval(obj.timer); if(fn){ fn(); } } 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]; } }}//offsetWidth獲取的是元素實際的寬度（包括邊框和內邊距）//只要是多物體運動，所有的屬性都不能共用</script>9、多物體同時運動動畫(支持鏈式動畫)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>多物體同時運動動畫</title><style type="text/css">body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;} table {border-collapse:collapse;border-spacing:0;} fieldset,img {border:0} address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal} ol,ul {list-style:none} caption,th,td{text-align:center} h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal} q:before,q:after {content:''} abbr,acronym { border:0}.odiv{position:relative;}.odiv ul li{width:200px; height:100px; background:yellow; margin-bottom:20px; border:2px solid #000;}#li1{opacity:0.3;filter:alpha(opacity:30);}</style></head><body><div id="odiv" class="odiv"> <ul> <li id="li1"></li> </ul></div></body></html><script language="javascript">window.onload = function(){ var li1 = document.getElementById('li1'); li1.onmouseover = function(){ startMov(li1,{width:201,height:200,opacity:100}); }; li1.onmouseout = function(){ startMov(li1,{width:200,height:100,opacity:30}); }; li1.timer = null; function startMov(obj,json,fn){//fn回調函數 clearInterval(obj.timer);//執行動畫之前清除動畫 var flag = true;//是否動畫都完成了 obj.timer = setInterval(function(){ for(var attr in json){ var icur = 0; if(attr == 'opacity'){ icur = Math.round(parseFloat(getStyle(obj,attr))*100);//轉換成整數,并且四舍五入下 //計算機在計算小數的時候往往是不準確的！ } else{ icur = parseInt(getStyle(obj,attr)); } var speed =0; speed = (json[attr] - icur)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(icur != json[attr]){ flag = false; } if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity:'+(icur+speed)+')'; obj.style.opacity = (icur+speed)/100; } else{ obj.style[attr] = icur+speed+'px'; } if(flag){ clearInterval(obj.timer); if(fn){ fn(); } } } },30); } function getStyle(obj,attr) { if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } }}//offsetWidth獲取的是元素實際的寬度（包括邊框和內邊距）//只要是多物體運動，所有的屬性都不能共用</script>最后一個動畫效果完善了上述所有動畫的代碼，自己可以根據上述的代碼進行擴展！
其實這九種原生js動畫效果，都有獨特之處，每個源碼都可以直接復制運行，希望對大家掌握js動畫有所幫助。
新聞熱點
疑難解答
