欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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);