Movement and performance optimization of div layer_javascript skills-JS Tutorial-php.cn

Movement and performance optimization of div layer_javascript skills

WBOY

Release： 2016-05-16 18:16:19

Original

1028 people have browsed it

This will also happen if a page structure is very complex or if the computer configuration is not good. In order to understand the reason for the slowdown, we did several demo comparisons and finally found that adding a timer to the mousemove event can improve the experience.

The key to the entire code is the timer that starts when the mouse is pressed, so that the Onmousemove event will be executed every 30ms, and then the timer will be cleared when the mouse is released.

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

This can reduce the burden on the browser to draw the div layer, so that it does not have to be drawn every time when dragging When moving, it is actually too short for the human eye to detect changes. The delay interval can be set by yourself based on your experience.

Copy code The code is as follows:

 
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; 
//When the mouse is pressed, the timer starts working and executes the mousemove event every 50ms 
timer=setInterval(function(){flag=true;},30); 
 }; 
//Drag; 
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"; 
} 
} 
}; 
//Stop dragging; 
source.onmouseup=function (e){ 
 if(moveable) { 
moveable = false; 
clearInterval(timer); 
//alert(i); 
} 
}; 
//stop dragging; 
source.onmouseout=function (e){ 
if(moveable) { 
moveable = false; 
clearInterval(timer); 
//alert(i); 
} 
 }; 
} 