【查漏補缺】運動函式封裝呼叫
阿新 • • 發佈:2018-12-11
一直在思考在多個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元素屬性,