在做页面中，多数情况下都会遇到页面上做动画效果，我们大部分做动画的时候都是使用框架来做（比如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> <div> </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> <div> </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></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、多物体动画
说明：多个物体在一起执行的动画效果