1. 程式人生 > >【查漏補缺】運動函式封裝呼叫

【查漏補缺】運動函式封裝呼叫

一直在思考在多個div運動的過程中,通過for迴圈在給每個div加事件的時候,可以直接 div[ i ].onmouseover = tomove; 但是發現,無法找到當前呼叫函式的div,用了this和在運動函式中獲取div並加i的兩種情況,瘋狂報錯 ̄へ ̄

其實,可以通過新增物件引數obj,移動至目標距離target,或者,改變任意引數ele。 第一種最簡單的,加入引數obj

 function moveto(obj){
        var timer = 0;
        clearInterval(timer);
        timer = setInterval(function(){
            
            var speed = (400-obj.offsetWidth)/10;
            obj.style.width=obj.offsetWidth + speed+'px';
          },30);  
       
      }

這是最簡單的,滑鼠移入,div變寬到目標寬度。 接下來你,完善滑鼠移入和移除的完整事件,通過新增

adiv[i].onmouseout = function(){
          clearInterval(timer);
      }

會發現,報錯了=。=,因為timer只在moveto函式中被定義。 進一步完善: 思考,要保證每個div運動的互不干擾(多物體運動最容易出現的錯誤,所有的資料都不能共用,不然會出現錯誤。可以設定為屬性。),那定時器也是要分開的,通過給adiv[ i ].timer = mull; 同時,在運動函式中都把timer 改成obj.timer

var adiv = document.getElementsByTagName('div');
     adiv[i].timer = null;
     for(var i = 0; i <adiv.length; i++){
            // 給每個div加事件
        adiv[i].onmouseover = function(){
            moveto(this);
        }
        adiv[i].onmouseout = function(){
          clearInterval(timer);
        }
     }   
      function moveto(obj){
         clearInterval(obj.timer);
         obj.timer = setInterval(function(){
            var speed = (400-obj.offsetWidth)/10;
            obj.style.width=obj.offsetWidth + speed+'px';
          },30);  
      }

進一步完善,對速度防止出現小數的情況,無法到達400的點而出現的晃動

			var speed = (400-obj.offsetWidth)/10;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);
            						//	對速度進行取整

進一步思考,在實際應用中,要求可以更改到達的目標位置,而不是永遠400,考慮在moveto函式中加入target引數

var adiv = document.getElementsByTagName('div');
    
     for(var i = 0; i <adiv.length; i++){
            // 給每個div加事件
        adiv[i].timer = null; //保證每個div的定時器互不干擾
        adiv[i].onmouseover = function(){
            moveto(this,1000);
        }
     }
    
      function moveto(obj,target){
        clearInterval(obj.timer);
        
        obj.timer = setInterval(function(){
            var speed = (target-obj.offsetWidth)/10;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);
            
            if(obj.offsetWidth == target){
                clearInterval(obj.timer);
            }else{
                 obj.style.width=obj.offsetWidth + speed+'px';
            }
          },30);  
       
      }

這樣可以在迴圈中隨時改變到達的目標值。 再進一步思考,當要改變其他屬性的時候,再回到moveto函式,還需要再加入一個新的ele元素屬性,