九種原生js動畫效果

更新時間：2015年11月11日 11:11:30 投稿：lijiao

這篇文章主要介紹了九種原生js動畫效果，個個都非常精彩，都值得大家學(xué)習(xí)，需要的朋友可以參考下

在做頁面中，多數(shù)情況下都會遇到頁面上做動畫效果，我們大部分做動畫的時候都是使用框架來做（比如jquery），這里我介紹下如何讓通過原生的js來實現(xiàn)像框架一樣的動畫效果！
1、勻速動畫效果
說明：勻速動畫就是動畫的效果從開始到結(jié)束每次執(zhí)行的速度都是一致的

<!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){//目標(biāo)值
 clearInterval(timer);//執(zhí)行當(dāng)前動畫同時清除之前的動畫
 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)+(當(dāng)前元素的margin-left)。
offsetTop=(offsetParent的padding-top)+(中間元素的offsetHeight)+(當(dāng)前元素的margin-top)。
當(dāng)offsetParent為body時情況比較特殊:
在IE8/9/10及Chrome中，offsetLeft = (body的margin-left)+(body的border-width)+(body的padding-left)+(當(dāng)前元素的margin-left)。
在FireFox中，offsetLeft = (body的margin-left)+(body的padding-left)+(當(dāng)前元素的margin-left)。
offsetParent屬性返回一個對象的引用，這個對象是距離調(diào)用offsetParent的元素最近的（在包含層次中最靠近的），并且是已進行過CSS定位的容器元素。 如果這個容器元素未進行CSS定位, 則offsetParent屬性的取值為根元素的引用。
總的來說兩條規(guī)則：
1、如果當(dāng)前元素的父級元素沒有進行CSS定位（position為absolute或relative），offsetParent為body。
2、如果當(dāng)前元素的父級元素中有CSS定位（position為absolute或relative），offsetParent取最近的那個父級元素。
*/
</script>

2、緩沖動畫
說明：緩沖動畫就是動畫到結(jié)束或這開始的時候，速度是隨著動畫執(zhí)行的進度動態(tài)變化的

<!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){//速度和目標(biāo)值
 clearInterval(timer);//執(zhí)行當(dāng)前動畫同時清除之前的動畫
 var odiv = document.getElementById('odiv');
 timer = setInterval(function(){
 var speed = (itarget-odiv.offsetLeft)/10;//緩沖動畫的速度參數(shù)變化值
 //如果速度是大于0，說明是向右走，那么就向上取整
 speed = speed>0?Math.ceil(speed):Math.floor(speed);
 //Math.floor();向下取整
 if(odiv.offsetLeft == itarget){
  clearInterval(timer);
 }
 else{
  //clientLeft 返回對象的offsetLeft屬性值和到當(dāng)前窗口左邊的真實值之間的距離 
  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;//事先定義
  //這里發(fā)現(xiàn)一個問題，對象的動畫屬性可以不定義，但是透明度屬性必須定義，否則報錯
 }
}
function startOP(obj,utarget){
  clearInterval(obj.timer);//先關(guān)閉定時器
  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、多物體動畫
說明：多個物體在一起執(zhí)行的動畫效果

<!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);//執(zhí)行動畫之前清除動畫
  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獲取的是元素實際的寬度（包括邊框和內(nèi)邊距）
//只要是多物體運動，所有的屬性都不能共用
</script>

5、獲取樣式動畫
說明:這里的獲取樣式是通過計算出來元素的樣式，然后通過這個計算出來的結(jié)果來操作元素

<!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：獲取計算后的樣式，也叫當(dāng)前樣式、最終樣式。
優(yōu)點：可以獲取元素的最終樣式，包括瀏覽器的默認值，而不像style只能獲取行間樣式，所以更常用到。
注意：不能獲取復(fù)合樣式如background屬性值，只能獲取單一樣式如background-color等。
alert (oAbc.currentStyle);
非常遺憾的是，這個好使的東西也不能被各大瀏覽器完美地支持。準(zhǔn)確地說，在我測試的瀏覽器中，IE8和Opera 11彈出了“object CSSStyleDeclaration”；FF 12、chrome 14、safari 5則彈出“undefined”。
雖然currentStyle無法適用于所有瀏覽器，但是可以根據(jù)以上測試的結(jié)果來區(qū)分開支持、不支持的瀏覽器，然后再找到兼容的寫法。
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新版本中只需要第一個參數(shù)，即操作對象，第二個參數(shù)寫“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”。雖然結(jié)果不同，但是可以發(fā)現(xiàn)chrome和safari也都和火狐一樣，順利地讀取到了屬性值。不支持currentStyle的三款瀏覽器(FF、chrome、safari)，都是支持getComputedStyle的。
結(jié)果表明：對瀏覽器是否支持currentStyle的判斷 + getComputedStyle，就可以做到兼容各主流瀏覽器的效果。而且兼容寫法并不復(fù)雜，你掌握了嗎？^_^
支持currentStyle：IE、Opera
支持getComputedStyle：FireFox、Chrome、Safari
注意最后的彈出內(nèi)容，currentStyle返回瀏覽器的默認值”auto”，而getComputedStyle則返回具體的值”**px”。這應(yīng)該是兩者的一個小差異，有興趣的童鞋可以一起交流研究下。
*/
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獲取的是元素實際的寬度（包括邊框和內(nèi)邊距）
//只要是多物體運動，所有的屬性都不能共用
</script>

6、多物體復(fù)雜動畫
說明：多物體復(fù)雜動畫可以控制元素的不同屬性變化來實現(xiàn)動畫效果

<!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>多物體復(fù)雜動畫</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);//執(zhí)行動畫之前清除動畫
  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獲取的是元素實際的寬度（包括邊框和內(nèi)邊距）
//只要是多物體運動，所有的屬性都不能共用
</script>

7、多物體復(fù)雜動畫（帶透明度的）

<!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>多物體復(fù)雜動畫(帶透明度的)</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);//執(zhí)行動畫之前清除動畫
  obj.timer = setInterval(function(){
   var icur = 0;
   if(attr == 'opacity'){
   icur = Math.round(parseFloat(getStyle(obj,attr))*100);//轉(zhuǎn)換成整數(shù),并且四舍五入下
   //計算機在計算小數(shù)的時候往往是不準(zhǔn)確的！
   }
   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獲取的是元素實際的寬度（包括邊框和內(nèi)邊距）
//只要是多物體運動，所有的屬性都不能共用
</script>

8、鏈?zhǔn)絼赢?br /> 說明：鏈?zhǔn)絼赢嬀褪钱?dāng)前動畫執(zhí)行完成后執(zhí)行下一個動畫效果

<!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>鏈?zhǔn)絼赢?lt;/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回調(diào)函數(shù)
  clearInterval(obj.timer);//執(zhí)行動畫之前清除動畫
  obj.timer = setInterval(function(){
   var icur = 0;
   if(attr == 'opacity'){
   icur = Math.round(parseFloat(getStyle(obj,attr))*100);//轉(zhuǎn)換成整數(shù),并且四舍五入下
   //計算機在計算小數(shù)的時候往往是不準(zhǔn)確的！
   }
   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獲取的是元素實際的寬度（包括邊框和內(nèi)邊距）
//只要是多物體運動，所有的屬性都不能共用
</script>

9、多物體同時運動動畫(支持鏈?zhǔn)絼赢?

<!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回調(diào)函數(shù)
  clearInterval(obj.timer);//執(zhí)行動畫之前清除動畫
  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);//轉(zhuǎn)換成整數(shù),并且四舍五入下
   //計算機在計算小數(shù)的時候往往是不準(zhǔn)確的！
   }
   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獲取的是元素實際的寬度（包括邊框和內(nèi)邊距）
//只要是多物體運動，所有的屬性都不能共用
</script>

最后一個動畫效果完善了上述所有動畫的代碼，自己可以根據(jù)上述的代碼進行擴展！

其實這九種原生js動畫效果，都有獨特之處，每個源碼都可以直接復(fù)制運行，希望對大家掌握js動畫有所幫助。

您可能感興趣的文章: