码迷，mamicode.com
首页 > Web开发 > 详细

原生js动画效果（源码解析）

时间：2015-11-10 16:03:42      阅读：344      评论：0      收藏：0      [点我收藏+]

标签：

在做页面中，多数情况下都会遇到页面上做动画效果，之前一直都是用jquery，一直没有试过用原生的js来做，今天正好看到一篇js原生动画的效果，特记录在此，

原文地址：http://www.it165.net/pro/html/201410/23513.html

1、匀速动画效果

说明：匀速动画就是动画的效果从开始到结束每次执行的速度都是一致的

 
01.<!DOCTYPE html PUBLIC ‘-//W3C//DTD XHTML 1.0 Transitional//EN‘ ‘http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd‘>
02.<html xmlns=‘http://www.w3.org/1999/xhtml‘>
03.<head>
04.<meta http-equiv=‘Content-Type‘ content=‘text/html; charset=utf-8‘ />
05.<title>匀速动画</title>
06.<style type=‘text/css‘>
07.html,body{margin:0;padding:0;}
08.div{margin:0;padding:0;}
09..odiv{width:200px; height:200px; background:#f00; position:relative; left:-200px; top:100px;}
10..sdiv{width:20px; height:60px; background:#00f; position:absolute; top:70px; right:-20px;}
11.</style>
12.</head>
13.<body>
14.<div id=‘odiv‘ class=‘odiv‘>
15.<div id=‘sdiv‘ class=‘sdiv‘>
16.</div>
17.</div>
18.</body>
19.</html>
20.<script language=‘javascript‘>
21.window.onload = function(){
22.var odiv = document.getElementById(‘odiv‘);
23.odiv.onmouseover = function(){
24.startMover(0);
25.}
26.odiv.onmouseout = function(){
27.startMover(-200);
28.}
29.}
30.var timer = null;
31.function startMover(itarget){//目标值
32.clearInterval(timer);//执行当前动画同时清除之前的动画
33.var odiv = document.getElementById(‘odiv‘);
34.timer = setInterval(function(){
35.var speed = 0;
36.if(odiv.offsetLeft > itarget){
37.speed = -1;
38.}
39.else{
40.speed = 1;
41.}
42.if(odiv.offsetLeft == itarget){
43.clearInterval(timer);
44.}
45.else{
46.odiv.style.left = odiv.offsetLeft+speed+‘px‘;
47.}
48.},30);
49.}
50.//注明：offsetWidth = width+padding+border
51.//offsetHeight = height+padding+border
52.//offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)
53.//offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)
54./*
55.offsetLeft=(offsetParent的padding-left)+(中间元素的offsetWidth)+(当前元素的margin-left)。
56.offsetTop=(offsetParent的padding-top)+(中间元素的offsetHeight)+(当前元素的margin-top)。
57.当offsetParent为body时情况比较特殊:
58.在IE8/9/10及Chrome中，offsetLeft = (body的margin-left)+(body的border-width)+(body的padding-left)+(当前元素的margin-left)。
59.在FireFox中，offsetLeft = (body的margin-left)+(body的padding-left)+(当前元素的margin-left)。
60.offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。
61.总的来说两条规则：
62.1、如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。
63.2、如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。
64.*/
65.</script>

 

 2、缓冲动画

说明：缓冲动画就是动画到结束或这开始的时候，速度是随着动画执行的进度动态变化的

01.<!DOCTYPE html PUBLIC ‘-//W3C//DTD XHTML 1.0 Transitional//EN‘ ‘http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd‘>
02.<html xmlns=‘http://www.w3.org/1999/xhtml‘>
03.<head>
04.<meta http-equiv=‘Content-Type‘ content=‘text/html; charset=utf-8‘ />
05.<title>缓冲动画</title>
06.<style type=‘text/css‘>
07.html,body{margin:0;padding:0;}
08.div{margin:0;padding:0;}
09..odiv{width:200px; height:200px; background:#f00; position:relative; left:-200px; top:100px;}
10..sdiv{width:20px; height:60px; background:#00f; position:absolute; top:70px; right:-20px;}
11.</style>
12.</head>
13.<body>
14.<div id=‘odiv‘ class=‘odiv‘>
15.<div id=‘sdiv‘ class=‘sdiv‘>
16.</div>
17.</div>
18.</body>
19.</html>
20.<script language=‘javascript‘>
21.window.onload = function(){
22.var odiv = document.getElementById(‘odiv‘);
23.odiv.onmouseover = function(){
24.startMover(0);
25.}
26.odiv.onmouseout = function(){
27.startMover(-200);
28.}
29.}
30.var timer = null;
31.function startMover(itarget){//速度和目标值
32.clearInterval(timer);//执行当前动画同时清除之前的动画
33.var odiv = document.getElementById(‘odiv‘);
34.timer = setInterval(function(){
35.var speed = (itarget-odiv.offsetLeft)/10;//缓冲动画的速度参数变化值
36.//如果速度是大于0，说明是向右走，那么就向上取整
37.speed = speed>0?Math.ceil(speed):Math.floor(speed);
38.//Math.floor();向下取整
39.if(odiv.offsetLeft == itarget){
40.clearInterval(timer);
41.}
42.else{
43.//clientLeft 返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离
44.odiv.style.left = odiv.offsetLeft+speed+‘px‘;
45.}
46.},30);
47.}
48.</script>

 

3、透明度动画

说明：处理元素透明效果的动画

01.<!DOCTYPE html PUBLIC ‘-//W3C//DTD XHTML 1.0 Transitional//EN‘ ‘http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd‘>
02.<html xmlns=‘http://www.w3.org/1999/xhtml‘>
03.<head>
04.<meta http-equiv=‘Content-Type‘ content=‘text/html; charset=utf-8‘ />
05.<title>透明度动画</title>
06.<style type=‘text/css‘>
07.html,body{margin:0;padding:0;}
08.div{margin:0;padding:0;}
09..odiv{width:200px; height:200px; background:#f00; position:relative; left:0px; top:100px;opacity:0.3; filter:alpha(opacity:30);float:left; margin:10px;}
10.</style>
11.</head>
12.<body>
13.<div id=‘odiv‘ class=‘odiv‘></div>
14.</body>
15.</html>
16.<script language=‘javascript‘>
17.window.onload = function(){
18.var odiv = document.getElementsByTagName(‘div‘);
19.for(var i=0;i<odiv.length;i++)
20.{
21.odiv[i].onmouseover = function(){
22.startOP(this,100);
23.}
24.odiv[i].onmouseout = function(){
25.startOP(this,30);
26.}
27.odiv[i].timer = null;//事先定义
28.odiv[i].alpha = null;//事先定义
29.//这里发现一个问题，对象的动画属性可以不定义，但是透明度属性必须定义，否则报错
30.}
31.}
32.function startOP(obj,utarget){
33.clearInterval(obj.timer);//先关闭定时器
34.obj.timer = setInterval(function(){
35.var speed = 0;
36.if(obj.alpha>utarget){
37.speed = -10;
38.}
39.else{
40.speed = 10;
41.}
42.obj.alpha = obj.alpha+speed;
43.if(obj.alpha == utarget){
44.clearInterval(obj.timer);
45.}
46.obj.style.filter = ‘alpha(opacity:‘+obj.alpha+‘)‘;//基于IE的
47.obj.style.opacity = parseInt(obj.alpha)/100;
48.},30);
49.}
50.</script>

 

4、多物体动画

说明：多个物体在一起执行的动画效果

技术分享技术分享

01.<!DOCTYPE html PUBLIC ‘-//W3C//DTD XHTML 1.0 Transitional//EN‘ ‘http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd‘>
02.<html xmlns=‘http://www.w3.org/1999/xhtml‘>
03.<head>
04.<meta http-equiv=‘Content-Type‘ content=‘text/html; charset=utf-8‘ />
05.<title>多物体动画</title>
06.<style type=‘text/css‘>
07.body,div,dl,dt,dd,ul,ol,li,h3,h4,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;}
08.table {border-collapse:collapse;border-spacing:0;}
09.fieldset,img {border:0}
10.address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}
11.ol,ul {list-style:none}
12.caption,th,td{text-align:center}
13.h3,h4,h3,h4,h5,h6 {font-size:100%;font-weight:normal}
14.q:before,q:after {content:‘‘}
15.abbr,acronym { border:0}
16..odiv{position:relative;}
17..odiv ul li{width:200px; height:100px; background:yellow; margin-bottom:20px;}
18.</style>
19.</head>
20.<body>
21.<div id=‘odiv‘ class=‘odiv‘>
22.<ul>
23.<li></li>
24.<li></li>
25.<li></li>
26.</ul>
27.</div>
28.</body>
29.</html>
30.<script language=‘javascript‘>
31.window.onload = function(){
32.var olist = document.getElementsByTagName(‘li‘);
33.for(var i=0; i<olist.length;i++)
34.{
35.olist[i].onmouseover = function(){
36.startmov(this,400);
37.};
38.olist[i].onmouseleave = function(){
39.startmov(this,200);
40.};
41.olist[i].timer = null;
42.}
43.function startmov(obj,itarget){
44.clearInterval(obj.timer);//执行动画之前清除动画
45.obj.timer = setInterval(function(){
46.var speed =0;
47.speed = (itarget - obj.offsetWidth)/8;
48.speed = speed>0?Math.ceil(speed):Math.floor(speed);
49.if(obj.offsetWidth == itarget){
50.clearInterval(obj.timer);
51.}
52.else{
53.obj.style.width = obj.offsetWidth+speed+‘px‘;
54.}
55.},30);
56.}
57.}
58.//offsetWidth获取的是元素实际的宽度（包括边框和内边距）
59.//只要是多物体运动，所有的属性都不能共用
60.</script>

 

5、获取样式动画

说明:这里的获取样式是通过计算出来元素的样式，然后通过这个计算出来的结果来操作元素

技术分享技术分享

01.<!DOCTYPE html PUBLIC ‘-//W3C//DTD XHTML 1.0 Transitional//EN‘ ‘http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd‘>
02.<html xmlns=‘http://www.w3.org/1999/xhtml‘>
03.<head>
04.<meta http-equiv=‘Content-Type‘ content=‘text/html; charset=utf-8‘ />
05.<title>样式动画</title>
06.<style type=‘text/css‘>
07.body,div,dl,dt,dd,ul,ol,li,h3,h4,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;}
08.table {border-collapse:collapse;border-spacing:0;}
09.fieldset,img {border:0}
10.address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}
11.ol,ul {list-style:none}
12.caption,th,td{text-align:center}
13.h3,h4,h3,h4,h5,h6 {font-size:100%;font-weight:normal}
14.q:before,q:after {content:‘‘}
15.abbr,acronym { border:0}
16..odiv{position:relative;width:200px; height:200px; border:2px solid #000; background:red; font-size:20px;}
17.</style>
18.</head>
19. 
20.<body>
21.<div id=‘odiv‘ class=‘odiv‘>
22.hjshfjdfsdfhsdj
23.</div>
24.</body>
25.</html>
26.<script language=‘javascript‘>
27./*
28.currentStyle：获取计算后的样式，也叫当前样式、最终样式。
29.优点：可以获取元素的最终样式，包括<a href="http://www.it165.net/edu/ewl/" target="_blank" class="keylink">浏览器</a>的默认值，而不像style只能获取行间样式，所以更常用到。
30.注意：不能获取复合样式如background属性值，只能获取单一样式如background-color等。
31.alert (oAbc.currentStyle);
32.非常遗憾的是，这个好使的东西也不能被各大<a href="http://www.it165.net/edu/ewl/" target="_blank" class="keylink">浏览器</a>完美地支持。准确地说，在我测试的浏览器中，IE8和Opera 11弹出了“object CSSStyleDeclaration”；FF 12、chrome 14、safari 5则弹出“undefined”。
33.虽然currentStyle无法适用于所有浏览器，但是可以根据以上测试的结果来区分开支持、不支持的浏览器，然后再找到兼容的写法。
34.var oAbc = document.getElementById(‘abc‘);
35.if(oAbc.currentStyle) {
36.//IE、Opera
37.alert(‘我支持currentStyle‘);
38.} else {
39.//FF、chrome、safari
40.alert(‘我不支持currentStyle‘);
41.}
42.其实在FF浏览器中我们可以使用getComputedStyle(obj,false)来达到与IE下currentStyle相同的效果。
43.getComputedStyle(obj,false)：在FF新版本中只需要第一个参数，即操作对象，第二个参数写“false”也是大家通用的写法，目的是为了兼容老版本的火狐浏览器。
44.兼容写法：
45.var oAbc = document.getElementById(‘abc‘);
46.if(oAbc.currentStyle) {
47.//IE、Opera
48.//alert(‘我支持currentStyle‘);
49.alert(oAbc.currentStyle.width);
50.} else {
51.//FF、chrome、safari
52.//alert(‘我不支持currentStyle‘);
53.alert(getComputedStyle(oAbc,false).width);
54.}
55.一个空白页面中body的id=”abc”，测试以上代码，IE和Opera弹出“auto”，其它三款浏览器则弹出“***px”。虽然结果不同，但是可以发现chrome和safari也都和火狐一样，顺利地读取到了属性值。不支持currentStyle的三款浏览器(FF、chrome、safari)，都是支持getComputedStyle的。
56.结果表明：对浏览器是否支持currentStyle的判断 + getComputedStyle，就可以做到兼容各主流浏览器的效果。而且兼容写法并不复杂，你掌握了吗？^_^
57.支持currentStyle：IE、Opera
58.支持getComputedStyle：FireFox、Chrome、Safari
59.注意最后的弹出内容，currentStyle返回浏览器的默认值”auto”，而getComputedStyle则返回具体的值”**px”。这应该是两者的一个小差异，有兴趣的童鞋可以一起交流研究下。
60.*/
61.window.onload = function(){
62.var odiv = document.getElementById(‘odiv‘);
63.odiv.onmou<a href="http://www.it165.net/admin/" target="_blank" class="keylink">seo</a>ver = function(){
64.startMov(this);
65.};
66.function startMov(obj){
67.setInterval(function(){
68.obj.style.width = parseInt(getStyle(obj,‘width‘))+1+‘px‘;
69.obj.style.fontSize = parseInt(getStyle(obj,‘fontSize‘))+1+‘px‘;
70.},30);
71.}
72.function getStyle(obj,attr)
73.{
74.if(obj.currentStyle){
75.return obj.currentStyle[attr];
76.}
77.else{
78.return getComputedStyle(obj,false)[attr];
79.}
80.}
81.}
82.//offsetWidth获取的是元素实际的宽度（包括边框和内边距）
83.//只要是多物体运动，所有的属性都不能共用
84.</script>

 

 6、多物体复杂动画

说明：多物体复杂动画可以控制元素的不同属性变化来实现动画效果

技术分享技术分享

01.<!DOCTYPE html PUBLIC ‘-//W3C//DTD XHTML 1.0 Transitional//EN‘ ‘http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd‘>
02.<html xmlns=‘http://www.w3.org/1999/xhtml‘>
03.<head>
04.<meta http-equiv=‘Content-Type‘ content=‘text/html; charset=utf-8‘ />
05.<title>多物体复杂动画</title>
06.<style type=‘text/css‘>
07.body,div,dl,dt,dd,ul,ol,li,h3,h4,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;}
08.table {border-collapse:collapse;border-spacing:0;}
09.fieldset,img {border:0}
10.address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}
11.ol,ul {list-style:none}
12.caption,th,td{text-align:center}
13.h3,h4,h3,h4,h5,h6 {font-size:100%;font-weight:normal}
14.q:before,q:after {content:‘‘}
15.abbr,acronym { border:0}
16..odiv{position:relative;}
17..odiv ul li{width:200px; height:100px; background:yellow; margin-bottom:20px; border:2px solid #000;}
18.</style>
19.</head>
20.<body>
21.<div id=‘odiv‘ class=‘odiv‘>
22.<ul>
23.<li id=‘li1‘></li>
24.<li id=‘li2‘></li>
25.</ul>
26.</div>
27.</body>
28.</html>
29.<script language=‘javascript‘>
30.window.onload = function(){
31.var li1 = document.getElementById(‘li1‘);
32.var li2 = document.getElementById(‘li2‘);
33.li1.onmou<a href="http://www.it165.net/admin/" target="_blank" class="keylink">seo</a>ver = function(){
34.startMov(this,400,‘width‘);
35.};
36.li1.onmouseout = function(){
37.startMov(this,200,‘width‘);
38.};
39.li2.onmouseover = function(){
40.startMov(this,200,‘height‘);
41.};
42.li2.onmouseout = function(){
43.startMov(this,100,‘height‘);
44.};
45.function startMov(obj,itarget,attr){
46.clearInterval(obj.timer);//执行动画之前清除动画
47.obj.timer = setInterval(function(){
48.var icur = parseInt(getStyle(obj,attr));
49.var speed =0;
50.speed = (itarget - icur)/8;
51.speed = speed>0?Math.ceil(speed):Math.floor(speed);
52.if(icur == itarget){
53.clearInterval(obj.timer);
54.}
55.else{
56.obj.style[attr] = icur+speed+‘px‘;
57.}
58.},30);
59.}
60.function getStyle(obj,attr)
61.{
62.if(obj.currentStyle){
63.return obj.currentStyle[attr];
64.}
65.else{
66.return getComputedStyle(obj,false)[attr];
67.}
68.}
69.}
70.//offsetWidth获取的是元素实际的宽度（包括边框和内边距）
71.//只要是多物体运动，所有的属性都不能共用
72.</script>

 

7、多物体复杂动画（带透明度的）

技术分享技术分享

view sourceprint?
01.<!DOCTYPE html PUBLIC ‘-//W3C//DTD XHTML 1.0 Transitional//EN‘ ‘http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd‘>
02.<html xmlns=‘http://www.w3.org/1999/xhtml‘>
03.<head>
04.<meta http-equiv=‘Content-Type‘ content=‘text/html; charset=utf-8‘ />
05.<title>多物体复杂动画(带透明度的)</title>
06.<style type=‘text/css‘>
07.body,div,dl,dt,dd,ul,ol,li,h3,h4,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;}
08.table {border-collapse:collapse;border-spacing:0;}
09.fieldset,img {border:0}
10.address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}
11.ol,ul {list-style:none}
12.caption,th,td{text-align:center}
13.h3,h4,h3,h4,h5,h6 {font-size:100%;font-weight:normal}
14.q:before,q:after {content:‘‘}
15.abbr,acronym { border:0}
16..odiv{position:relative;}
17..odiv ul li{width:200px; height:100px; background:yellow; margin-bottom:20px; border:2px solid #000;}
18.#li1{opacity:0.3;filter:alpha(opacity:30);}
19.</style>
20.</head>
21. 
22.<body>
23.<div id=‘odiv‘ class=‘odiv‘>
24.<ul>
25.<li id=‘li1‘></li>
26.<li id=‘li2‘></li>
27.</ul>
28.</div>
29.</body>
30.</html>
31.<script language=‘javascript‘>
32.window.onload = function(){
33.var li1 = document.getElementById(‘li1‘);
34.var li2 = document.getElementById(‘li2‘);
35.li1.onmouseover = function(){
36.startMov(this,100,‘opacity‘);
37.};
38.li1.onmouseout = function(){
39.startMov(this,30,‘opacity‘);
40.};
41.li2.onmouseover = function(){
42.startMov(this,200,‘height‘);
43.};
44.li2.onmouseout = function(){
45.startMov(this,100,‘height‘);
46.}
47.li1.timer = null;
48.li2.timer = null;
49.function startMov(obj,itarget,attr){
50.clearInterval(obj.timer);//执行动画之前清除动画
51.obj.timer = setInterval(function(){
52.var icur = 0;
53.if(attr == ‘opacity‘){
54.icur = Math.round(parseFloat(getStyle(obj,attr))*100);//转换成整数,并且四舍五入下
55.//计算机在计算小数的时候往往是不准确的！
56.}
57.else{
58.icur = parseInt(getStyle(obj,attr));
59.}
60.var speed =0;
61.speed = (itarget - icur)/8;
62.speed = speed>0?Math.ceil(speed):Math.floor(speed);
63.if(icur == itarget){
64.clearInterval(obj.timer);
65.}
66.else{
67.if(attr == ‘opacity‘){
68.obj.style.filter = ‘alpha(opacity:‘+(icur+speed)+‘)‘;
69.obj.style.opacity = (icur+speed)/100;
70.}
71.else{
72.obj.style[attr] = icur+speed+‘px‘;
73.}
74.}
75.},30);
76.}
77.function getStyle(obj,attr)
78.{
79.if(obj.currentStyle){
80.return obj.currentStyle[attr];
81.}
82.else{
83.return getComputedStyle(obj,false)[attr];
84.}
85.}
86.}
87.//offsetWidth获取的是元素实际的宽度（包括边框和内边距）
88.//只要是多物体运动，所有的属性都不能共用
89.</script>

8、链式动画

说明：链式动画就是当前动画执行完成后执行下一个动画效果

技术分享技术分享

01.<!DOCTYPE html PUBLIC ‘-//W3C//DTD XHTML 1.0 Transitional//EN‘ ‘http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd‘>
02.<html xmlns=‘http://www.w3.org/1999/xhtml‘>
03.<head>
04.<meta http-equiv=‘Content-Type‘ content=‘text/html; charset=utf-8‘ />
05.<title>链式动画</title>
06.<style type=‘text/css‘>
07.body,div,dl,dt,dd,ul,ol,li,h3,h4,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;}
08.table {border-collapse:collapse;border-spacing:0;}
09.fieldset,img {border:0}
10.address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}
11.ol,ul {list-style:none}
12.caption,th,td{text-align:center}
13.h3,h4,h3,h4,h5,h6 {font-size:100%;font-weight:normal}
14.q:before,q:after {content:‘‘}
15.abbr,acronym { border:0}
16..odiv{position:relative;}
17..odiv ul li{width:200px; height:100px; background:yellow; margin-bottom:20px; border:2px solid #000;}
18.#li1{opacity:0.3;filter:alpha(opacity:30);}
19.</style>
20.</head>
21.<body>
22.<div id=‘odiv‘ class=‘odiv‘>
23.<ul>
24.<li id=‘li1‘></li>
25.</ul>
26.</div>
27.</body>
28.</html>
29.<script language=‘javascript‘>
30.window.onload = function(){
31.var li1 = document.getElementById(‘li1‘);
32.li1.onmouseover = function(){
33.startMov(li1,400,‘width‘,function(){
34.startMov(li1,200,‘height‘,function(){
35.startMov(li1,100,‘opacity‘);
36.});
37.});
38.};
39.li1.onmouseout = function(){
40.startMov(li1,30,‘opacity‘,function(){
41.startMov(li1,100,‘height‘,function(){
42.startMov(li1,100,‘width‘);
43.});
44.});
45.};
46.li1.timer = null;
47.function startMov(obj,itarget,attr,fn){//fn回调函数
48.clearInterval(obj.timer);//执行动画之前清除动画
49.obj.timer = setInterval(function(){
50.var icur = 0;
51.if(attr == ‘opacity‘){
52.icur = Math.round(parseFloat(getStyle(obj,attr))*100);//转换成整数,并且四舍五入下
53.//计算机在计算小数的时候往往是不准确的！
54.}
55.else{
56.icur = parseInt(getStyle(obj,attr));
57.}
58.var speed =0;
59.speed = (itarget - icur)/8;
60.speed = speed>0?Math.ceil(speed):Math.floor(speed);
61.if(icur == itarget){
62.clearInterval(obj.timer);
63.if(fn){
64.fn();
65.}
66.}
67.else{
68.if(attr == ‘opacity‘){
69.obj.style.filter = ‘alpha(opacity:‘+(icur+speed)+‘)‘;
70.obj.style.opacity = (icur+speed)/100;
71.}
72.else{
73.obj.style[attr] = icur+speed+‘px‘;
74.}
75.}
76.},30);
77.}
78.function getStyle(obj,attr)
79.{
80.if(obj.currentStyle){
81.return obj.currentStyle[attr];
82.}
83.else{
84.return getComputedStyle(obj,false)[attr];
85.}
86.}
87.}
88.//offsetWidth获取的是元素实际的宽度（包括边框和内边距）
89.//只要是多物体运动，所有的属性都不能共用
90.</script>

 

9、多物体同时运动动画(支持链式动画)

01.<!DOCTYPE html PUBLIC ‘-//W3C//DTD XHTML 1.0 Transitional//EN‘ ‘http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd‘>
02.<html xmlns=‘http://www.w3.org/1999/xhtml‘>
03.<head>
04.<meta http-equiv=‘Content-Type‘ content=‘text/html; charset=utf-8‘ />
05.<title>多物体同时运动动画</title>
06.<style type=‘text/css‘>
07.body,div,dl,dt,dd,ul,ol,li,h3,h4,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td {margin:0;padding:0; font-size:12px;}
08.table {border-collapse:collapse;border-spacing:0;}
09.fieldset,img {border:0}
10.address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}
11.ol,ul {list-style:none}
12.caption,th,td{text-align:center}
13.h3,h4,h3,h4,h5,h6 {font-size:100%;font-weight:normal}
14.q:before,q:after {content:‘‘}
15.abbr,acronym { border:0}
16..odiv{position:relative;}
17..odiv ul li{width:200px; height:100px; background:yellow; margin-bottom:20px; border:2px solid #000;}
18.#li1{opacity:0.3;filter:alpha(opacity:30);}
19.</style>
20.</head>
21.<body>
22.<div id=‘odiv‘ class=‘odiv‘>
23.<ul>
24.<li id=‘li1‘></li>
25.</ul>
26.</div>
27.</body>
28.</html>
29.<script language=‘javascript‘>
30.window.onload = function(){
31.var li1 = document.getElementById(‘li1‘);
32.li1.onmouseover = function(){
33.startMov(li1,{width:201,height:200,opacity:100});
34.};
35.li1.onmouseout = function(){
36.startMov(li1,{width:200,height:100,opacity:30});
37.};
38.li1.timer = null;
39.function startMov(obj,json,fn){//fn回调函数
40.clearInterval(obj.timer);//执行动画之前清除动画
41.var flag = true;//是否动画都完成了
42.obj.timer = setInterval(function(){
43.for(var attr in json){
44.var icur = 0;
45.if(attr == ‘opacity‘){
46.icur = Math.round(parseFloat(getStyle(obj,attr))*100);//转换成整数,并且四舍五入下
47.//计算机在计算小数的时候往往是不准确的！
48.}
49.else{
50.icur = parseInt(getStyle(obj,attr));
51.}
52.var speed =0;
53.speed = (json[attr] - icur)/8;
54.speed = speed>0?Math.ceil(speed):Math.floor(speed);
55.if(icur != json[attr]){
56.flag = false;
57.}
58.if(attr == ‘opacity‘){
59.obj.style.filter = ‘alpha(opacity:‘+(icur+speed)+‘)‘;
60.obj.style.opacity = (icur+speed)/100;
61.}
62.else{
63.obj.style[attr] = icur+speed+‘px‘;
64.}
65.if(flag){
66.clearInterval(obj.timer);
67.if(fn){
68.fn();
69.}
70.}
71.}
72.},30);
73.}
74.function getStyle(obj,attr)
75.{
76.if(obj.currentStyle){
77.return obj.currentStyle[attr];
78.}
79.else{
80.return getComputedStyle(obj,false)[attr];
81.}
82.}
83.}
84.//offsetWidth获取的是元素实际的宽度（包括边框和内边距）
85.//只要是多物体运动，所有的属性都不能共用
86.</script>

 

最后一个动画效果完善了上述所有动画的代码，自己可以根据上述的代码进行扩展！

原生js动画效果（源码解析）

标签：

原文地址：http://www.cnblogs.com/mopagunda/p/4953070.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！