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

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

層的移動(dòng)本來(lái)很簡(jiǎn)單，用jquery插件或者自己寫(xiě)一個(gè)也不難，但是最近一個(gè)ipad項(xiàng)目里，發(fā)現(xiàn)用手移動(dòng)div會(huì)感覺(jué)很卡，體驗(yàn)很差（可能是ipad的配置根不上pc）。

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

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

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

這樣可以減輕瀏覽器繪制div層的負(fù)擔(dān)，不至于拖動(dòng)時(shí)每時(shí)每刻都在移動(dòng)，其實(shí)太短了人眼也感覺(jué)不到變化，延遲間隔可以自己根據(jù)體驗(yàn)設(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)按下時(shí)，定時(shí)器開(kāi)始工作，每隔50ms執(zhí)行一次mousemove事件 
timer=setInterval(function(){flag=true;},30); 
}; 
//拖動(dòng); 
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"; 
} 
} 
}; 
//停止拖動(dòng); 
source.onmouseup=function (e){ 
if(moveable) { 
moveable = false; 
clearInterval(timer); 
//alert(i); 
} 
}; 
//停止拖動(dòng); 
source.onmouseout=function (e){ 
if(moveable) { 
moveable = false; 
clearInterval(timer); 
//alert(i); 
} 
}; 
} 

相關(guān)文章

javascript getElementByTagName的使用
javascript getElementByTagName當(dāng)鼠標(biāo)放上去時(shí)將超鏈接的顏色設(shè)為藍(lán)色的。
2009-06-06
js實(shí)現(xiàn)簡(jiǎn)單分頁(yè)導(dǎo)航欄效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單分頁(yè)導(dǎo)航欄效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-06-06
微信小程序?qū)崿F(xiàn)登錄遮罩效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)登錄遮罩效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-11-11
Web 開(kāi)發(fā)中Ajax的Session 超時(shí)處理方法
下面小編就為大家?guī)?lái)一篇Web 開(kāi)發(fā)中Ajax的Session 超時(shí)處理方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-01-01
網(wǎng)頁(yè)中右鍵功能的實(shí)現(xiàn)方法之contextMenu的使用
本文介紹一種網(wǎng)頁(yè)中實(shí)現(xiàn)右鍵功能的方案–contextMenu,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-02-02
javascript倒計(jì)時(shí)效果實(shí)現(xiàn)
這篇文章為大家分享了javascript倒計(jì)時(shí)效果實(shí)現(xiàn)代碼段，現(xiàn)今團(tuán)購(gòu)網(wǎng)、電商網(wǎng)、門(mén)戶(hù)網(wǎng)等，常使用時(shí)間記錄重要的時(shí)刻，如時(shí)間顯示、倒計(jì)時(shí)差、限時(shí)搶購(gòu)等，特別是雙十一活動(dòng)，需要的朋友可以參考下
2015-11-11
原生JS下拉加載插件分享
本文主要分享了原生JS下拉加載插件的實(shí)現(xiàn)代碼。具有一定的參考價(jià)值，需要的朋友一起來(lái)看下吧
2016-12-12
JS使用正則表達(dá)式找出最長(zhǎng)連續(xù)子串長(zhǎng)度
這篇文章主要介紹了js 正則找出最長(zhǎng)連續(xù)子串長(zhǎng)度的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2017-10-10
利用ES6實(shí)現(xiàn)單例模式及其應(yīng)用詳解
單例是在程序設(shè)計(jì)非?；A(chǔ)的東西，這篇文章主要給大家介紹了關(guān)于利用ES6實(shí)現(xiàn)單例模式及其應(yīng)用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2017-12-12
使用javascript做時(shí)間倒數(shù)讀秒功能的實(shí)例
今天小編就為大家分享一篇關(guān)于使用javascript做時(shí)間倒數(shù)讀秒功能的實(shí)例，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
2019-01-01