快捷導(dǎo)航

div層的移動及性能優(yōu)化

更新時間：2010年11月16日 23:00:24 作者：

層的移動本來很簡單，用jquery插件或者自己寫一個也不難，但是最近一個ipad項目里，發(fā)現(xiàn)用手移動div會感覺很卡，體驗很差（可能是ipad的配置根不上pc）。

同樣如果一個頁面結(jié)構(gòu)很復(fù)雜或者電腦配置不好的話也會出現(xiàn)這種情況。為了弄清變慢的原因，我們做了幾個demo對比，最后發(fā)現(xiàn)在mousemove事件上加上定時器能改進這個體驗。

整個代碼的關(guān)鍵地方在于當(dāng)鼠標(biāo)按下時開始了的計時器，這樣Onmousemove事件會每隔30ms執(zhí)行一次，然后在鼠標(biāo)松下的時候清除計時器。

timer=setInterval(function(){flag=true;},30);

這樣可以減輕瀏覽器繪制div層的負(fù)擔(dān)，不至于拖動時每時每刻都在移動，其實太短了人眼也感覺不到變化，延遲間隔可以自己根據(jù)體驗設(shè)置。

復(fù)制代碼代碼如下:

 
function Endrag(source,target){ 
source=typeof(source)=="object" ? source:document.getElementById(source); 
target=typeof(target)=="object" ? target:document.getElementById(target); 
var x0=0,y0=0,x1=0,y1=0,moveable=false,index=100; 
var timer,flag=false; 
var i=0; 
source.onmousedown=function(e){ 
e = e ? e : (window.event ? window.event : null); 
x0 = e.clientX ; 
y0 = e.clientY ; 
x1 = isNaN(parseInt(source.style.left))?0:parseInt(source.style.left); 
y1 = isNaN(parseInt(source.style.top))?0:parseInt(source.style.top); 
moveable = true; 
//當(dāng)鼠標(biāo)按下時，定時器開始工作，每隔50ms執(zhí)行一次mousemove事件 
timer=setInterval(function(){flag=true;},30); 
}; 
//拖動; 
source.onmousemove=function(e){ 
e = e ? e : (window.event ? window.event : null); 
if(moveable){ 
if(flag){ 
i++; 
flag=false; 
target.style.left = (e.clientX + x1 - x0 ) + "px"; 
target.style.top = (e.clientY + y1 - y0 ) + "px"; 
} 
} 
}; 
//停止拖動; 
source.onmouseup=function (e){ 
if(moveable) { 
moveable = false; 
clearInterval(timer); 
//alert(i); 
} 
}; 
//停止拖動; 
source.onmouseout=function (e){ 
if(moveable) { 
moveable = false; 
clearInterval(timer); 
//alert(i); 
} 
}; 
} 