九種原生js動畫效果
更新時間：2015年11月11日 11:11:30 投稿：lijiao
這篇文章主要介紹了九種原生js動畫效果，個個都非常精彩，都值得大家學習，需要的朋友可以參考下
在做頁面中，多數(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){//目標值
clearInterval(timer);//執(zhí)行當前動畫同時清除之前的動畫
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屬性返回一個對象的引用，這個對象是距離調(diào)用offsetParent的元素最近的（在包含層次中最靠近的），并且是已進行過CSS定位的容器元素。 如果這個容器元素未進行CSS定位, 則offsetParent屬性的取值為根元素的引用。
總的來說兩條規(guī)則：
1、如果當前元素的父級元素沒有進行CSS定位（position為absolute或relative），offsetParent為body。
2、如果當前元素的父級元素中有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){//速度和目標值
clearInterval(timer);//執(zhí)行當前動畫同時清除之前的動畫
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屬性值和到當前窗口左邊的真實值之間的距離
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);//先關閉定時器
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：獲取計算后的樣式，也叫當前樣式、最終樣式。
優(yōu)點：可以獲取元素的最終樣式，包括瀏覽器的默認值，而不像style只能獲取行間樣式，所以更常用到。
注意：不能獲取復合樣式如background屬性值，只能獲取單一樣式如background-color等。
alert (oAbc.currentStyle);
非常遺憾的是，這個好使的東西也不能被各大瀏覽器完美地支持。準確地說，在我測試的瀏覽器中，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，就可以做到兼容各主流瀏覽器的效果。而且兼容寫法并不復雜，你掌握了嗎？^_^
支持currentStyle：IE、Opera
支持getComputedStyle：FireFox、Chrome、Safari
注意最后的彈出內(nèi)容，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獲取的是元素實際的寬度（包括邊框和內(nèi)邊距）
//只要是多物體運動，所有的屬性都不能共用
</script>
6、多物體復雜動畫
說明：多物體復雜動畫可以控制元素的不同屬性變化來實現(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>多物體復雜動畫</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、多物體復雜動畫（帶透明度的）
<!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);//執(zhí)行動畫之前清除動畫
obj.timer = setInterval(function(){
var icur = 0;
if(attr == 'opacity'){
icur = Math.round(parseFloat(getStyle(obj,attr))*100);//轉(zhuǎn)換成整數(shù),并且四舍五入下
//計算機在計算小數(shù)的時候往往是不準確的！
}
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í)行完成后執(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; 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ù)的時候往往是不準確的！
}
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、多物體同時運動動畫(支持鏈式動畫)
<!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ù)的時候往往是不準確的！
}
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動畫效果，都有獨特之處，每個源碼都可以直接復制運行，希望對大家掌握js動畫有所幫助。
相關文章
Bootstrap模塊dropdown實現(xiàn)下拉框響應
這篇文章主要為大家詳細介紹了Bootstrap下拉框模塊dropdown實現(xiàn)下拉框響應，感興趣的朋友可以參考一下2016-05-05
這篇文章主要給大家介紹js數(shù)組的操作，數(shù)組的創(chuàng)建，數(shù)組元素的發(fā)那個吻，數(shù)組元素的添加，數(shù)組元素的刪除，數(shù)組的截取和合并，數(shù)組的拷貝，數(shù)組元素的排序，數(shù)組元素的字符串化等知識，對js數(shù)組的操作感興趣的朋友可以參考下本篇文章2015-10-10
怎么選擇Javascript框架(Javascript Framework)
如果你正面臨這樣的問題，希望下面的幾個建議對你在選擇javascript框架上會有所幫助2013-11-11
相信很多同仁做的系統(tǒng)后到都是用frameset或iframe來加載不同頁面的，不可不知道大家有沒有注意到，當frame框架中的頁面已經(jīng)加載完成后，可是ie瀏覽器的狀態(tài)欄還會一直顯示一個正在加載的狀態(tài)。2010-12-12
這篇文章主要介紹了LayUI下拉樹TreeSelect的使用解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了詳解ES7 Decorator 入門解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)音樂播放器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
常用參考資料（手冊）下載或者鏈接...2006-07-07
這篇文章主要介紹了詳解webpack 熱更新優(yōu)化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)百葉窗特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10