天天看點

dom設定動畫

dom設定動畫:要考慮是否真的需要 重要的是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);           

繼續閱讀