大家都知道JQuerry有animate方法来给DOM元素进行运动,CSS3中也有transition、transform来进行运动。而使用原生的Javascript来控制元素运动,需要写很多运动的细节以及兼容。
然而,当你的BOSS不让你使用庞大的JQ框架,而且你开发的产品也需要在一些不兼容CSS3的浏览器运行的时候,你是否觉得每次都要开个定时器来琢磨运动该怎么进行,是件很费力的事情呢?
那么福利来了,笔者最近总结了两个常用的运动框架,并将其写成组件,
只要按照下面的方法调用,即可方便使用。
1.在你的页面中引入js
<script src="Mover.js"></script>
2.在你的js代码中创建Mover对象
<script>
window.onload=function(){
var mover = new Mover();
};
</script>
3.开始使用mover!
用法说明:笔者写的组件包含了两种运动框架供使用,一种是基于速度的;一种是基于时间的,让我们来先看看基于速度的运动框架的用法
startMoveBySpeed(obj, json, endFn);
参数obj : 传入要运动的对象
参数json : 以json的形式传入要运动的属性,包括left、top、width、height等以px为单位的属性和透明度opacity,他们的值是运动的终点
参数endFn(可选) : 结束运动后要执行的方法
<script>
//基于速度的运动框架用法
window.onload=function(){
//得到你要运动的元素
var oDiv = document.getElementsByTagName('div')[0];
//使用运动框架
var mover = new Mover();
oDiv.onclick=function(){
mover.startMoveBySpeed(this,{
'left':200,'width':300,'opacity':50});
//使oDiv的left运动到200px,宽度变为300px,透明度变为50%
}
};
</script>
让我们来看看另外一种基于时间的运动框架
startMoveByTime(obj, json, options, endFn )
参数obj : 传入要运动的对象
参数json : 以json的形式传入要运动的属性,包括left、top、width、height等以px为单位的属性和透明度opacity,他们的值是运动的终点
参数options : 以json的形式传入传入运动的总时间和运动方式,如:
{
‘times’ :