js控制动画
程序员文章站
2024-01-13 22:25:22
...
js设置动画:要考虑是否真的需要 重要的是setTimeout
还有js创建的标记和css中创建的呈现效果可以一起使用
时间:setTimeout("function",time);
举例:
function moveMessage(){
var elem=document.getElementById("xx");
elem.style.left="200px";
}
function positionMessage(){
var elem=document.getElementById("xx");
elem.style.left="50px";
elem.style.top="100px";
movent=setTimeout("moveMessage()",5000);//5秒后执行moveMessage()函数
}
如果多个setTimeout在一个函数里执行 则互不影响 一起执行没有先后顺序
可以通过clearTimeout(movent);来手动关闭 所以要把setTimeout函数返回值赋值给movent
这样就可以关闭了 而且前面没有 var 就说明它是全局变量 在该函数外也可以手动关闭
movent作用域的问题
如果同时触发setTimeout对用一个元素进行不同操作就会产生滞后现象就跟拔河一样
因为它是全局变量
如果改为局部变量 通过clearTimeout来取消触发 会报错 因为该函数不存在movent
解决的方法就是给它创建一个属性 自定义属性是js允许的
if(被js控制动画的元素.yy){
clearTimeout(被js控制动画的元素.yy);
}
被js控制动画的元素.yy=setTimeout("moveMessage()",5000);