> 웹 프론트엔드 > JS 튜토리얼 > div layer_javascript 스킬의 이동 및 성능 최적화

div layer_javascript 스킬의 이동 및 성능 최적화

WBOY
풀어 주다: 2016-05-16 18:16:19
원래의
1028명이 탐색했습니다.

이는 페이지 구조가 매우 복잡하거나 컴퓨터 구성이 좋지 않은 경우에도 발생합니다. 속도 저하의 원인을 이해하기 위해 몇 가지 데모 비교를 수행한 결과 마침내 mousemove 이벤트에 타이머를 추가하면 경험이 향상될 수 있다는 사실을 발견했습니다.

전체 코드의 핵심은 마우스를 눌렀을 때 시작되는 타이머로, 30ms마다 Onmousemove 이벤트가 실행되고 마우스를 놓으면 타이머가 지워집니다.

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

이렇게 하면 브라우저가 div 레이어를 그리는 부담을 줄일 수 있습니다. 드래그할 때마다 그려집니다. 움직일 때 실제로 인간의 눈이 변화를 감지하기에는 너무 짧습니다. 지연 간격은 경험에 따라 직접 설정할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

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 타이머,flag=false;
var i=0
source.onmousedown= function(e ){
e = e ? e : (window.event ? window.event : null)
x0 = e.clientX ;
y0 = e.clientY ; (parseInt( source.style.left))?0:parseInt(source.style.left);
y1 = isNaN(parseInt(source.style.top))?0:parseInt(source.style.top);
moveable = true;
//마우스를 누르면 타이머가 작동하기 시작하고 50ms마다 mousemove 이벤트를 실행합니다.
timer=setInterval(function(){flag=true;},30); 🎜> }//드래그;
source.onmousemove=function(e){
e = e ? e : (window.event ? window.event : null); ) {
if(flag){
i ;
flag=false;
target.style.left = (e.clientX x1 - x0 )
target.style. top = (e.clientY y1 - y0 ) "px";
}
}
//드래그 중지; if(moveable) {
moveable = false;
//alert(i)
}
}; source.onmouseout=function (e){
if(moveable) {
moveable = false;
clearInterval(timer)
//alert(i); ;
}

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿