首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

九种原生js动画效果

Posted in Javascript onNovember 11, 2015

在做页面中，多数情况下都会遇到页面上做动画效果，我们大部分做动画的时候都是使用框架来做（比如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属性的取值为根元素的引用。
总的来说两条规则：
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动画有所帮助。

九种原生js动画效果

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 新浪背投广告实现代码
Jul 07 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
div实现自适应高度的textarea实现angular双向绑定
Jan 08 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
详解webpack的配置文件entry与output
Aug 21 Javascript
JavaScript事件对象event用法分析
Jul 27 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
Vue组件模板的几种书写形式(3种)
Feb 19 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 Javascript
js文字横向滚动特效
Nov 11 #Javascript
详解javascript遍历方式
Nov 11 #Javascript
js window对象属性和方法相关资料整理
Nov 11 #Javascript
js clearInterval()方法的定义和用法
Nov 11 #Javascript
jquery原理以及学习技巧介绍
Nov 11 #Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 #Javascript
轻松实现javascript数据双向绑定
Nov 11 #Javascript
element-ui(1) 复合索引(1) 逻辑函数(1) 动态代理(1) pongo2(1) Carbon(1) 优先队列(1) 模板引擎(1) 连接查询(1) 数据合并(1)
You might like
高亮度显示ｐｈｐ源代码
2006/10/09 PHP
php桌面中心(一) 创建数据库
2007/03/11 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
原生js+canvas实现验证码
2020/11/29 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
python中解析json格式文件的方法示例
2017/05/03 Python
python如何为创建大量实例节省内存
2018/03/20 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
Python切片索引用法示例
2018/05/15 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
历史学专业个人的自我评价
2013/10/13 职场文书
学生手册家长评语
2014/02/10 职场文书
团日活动总结书
2014/05/08 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
JavaScript的function函数详细介绍
2021/11/20 Javascript