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

js动画学习(一)

时间:2016-02-20 14:34:52      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:

一、运动框架实现思路

1.匀速运动(属性值匀速变化)(改变 left, right, width, height, opacity 等);

2.缓冲运动(属性值的变化速度与当前值与目标值的差成正比);

3.多物体运动;

4.任意属性值的变化(用封装函数);

5.链式运动(同一物体完成一系列的运动);

6.多物体同时运动

====================================================

 二、简单运动之匀速运动

1 //鼠标移到元素上元素右移,鼠标离开元素回去。

2 var timer="";

3 function Move(speed,locat) {//移动速度,移动终点位置

4     var ob=document.getElementById(‘box1‘);

5     clearInterval(timer);

6     timer=setInterval(function () {

7         if (ob.offsetLeft==locat) {//当前位置到达指定终点,关闭定时器

8             clearInterval(timer);

9         } else {

10            ob.style.left=ob.offsetLeft+speed+‘px‘;

11        }

12     }, 30)

13 }

 

js动画学习(一)

标签:

原文地址:http://www.cnblogs.com/csxiaoyu/p/5203206.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!