javascript运动函数.docx

复制代码

　　由于不仅仅是left值可以做运动，其他属性（如width）也可以。

所以，属性attr也应该作为参数提取出来

　　这时就无法使用offset类属性，而应该使用计算样式的兼容函数getCSS（）

复制代码

functiongetCSS（obj,style）{

if（window.getComputedStyle）{

returngetComputedStyle（obj）[style];

}

returnobj.currentStyle[style];

}

functionmove（obj,attr,target,speed）{

clearInterval（timer）;

timer=setInterval（function（）{

varcur=parseInt（getCSS（obj,attr））;

if（（cur-target）*speed<0）{

obj.style.left=cur+speed+'px';

}else{

obj.style.left=target+'px';

clearInterval（timer）;

timer=0;

}

},30）;

}

复制代码

透明度

　　透明度是一个比较特殊的样式，因为IE8-浏览器不支持opacity，只可能通过滤镜的方式写成filter:

alpha（opacity=透明值）

　　但是，由于IE浏览器获取计算样式时，可以获得自定义样式，所以虽然opacity属性在IE8-浏览器无法生效，但是可以获得它的值

　　如果透明度做运动的话，则需要对运动函数进行重新封装

复制代码

分享到

复制代码

多值

　　如果一个元素有多个值同时运动时，像下面这样直接调用move（）函数是有问题的

move（test,'opacity',0.1,-0.05）;

move（test,'left',-100,-1）;

　　因为函数里面定时器的变量timer是一个公共变量，当一个运动停止时，会清除定时器。

这时另一个运动即使没有完成，定时器已经停止了，就无法继续运动了

　　所以，合适的做法是在参数对象obj下面设置一个自定义属性timers，timers为一个空对象，然后将定时器返回值储存在timers对象下的attr属性中，此时两个定时器不会相互干扰

复制代码

分享到

复制代码

多物体

　　如果在页面中有多个元素利用运动函数进行运动。

由于定时器返回值在不同元素不同属性中都不会受影响。

所以，上面的运动函数可以直接使用

复制代码

元素一

元素二

开始运动

还原

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

javascript 运动 函数

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。