Javascript 중력 점프 드래그 운동 효과 예시

프레젠테이션 주소:http://www.ihuxu.com/project/gcdmove/호출 예제:var GCDM=gcdMove(oDiv,100,0);GCDM.startMove();//GCDM.stopMove();/운동 을 마 친 이 단락 의 JS 코드 는 이미 봉인 되 었 습 니 다.코드 는 다음 과 같 습 니 다.간략하게 설명 하 겠 습 니 다.-obj 는 변경 할 대상 요소 이 고 보통 특정한 div 입 니 다.iSpeedX,iSpeedY 는 div 출사 의 가로(오른쪽)이 고 세로(아래)의 초기 속 도 는 물론 0 으로 설정 할 수 있 습 니 다.

 
/** 
* @Desc          - Gravity Crash Drag Move(gcdMove) 
* @Author GenialX 
* @URL www.ihuxu.com 
* @QQ 2252065614 
* @Date 2013.06.22 
*/ 
function gcdMove(obj, iSpeedX, iSpeedY) { 
_this = this;//public identifier 
//construct fun 
var gcdMove; 
//self defined fun 
var start; 
_this.startMove; 
//other var 
var iTimer; 
var iLastX = 0; 
var iLastY = 0; 
//construct fun 
start = function() { 
clearInterval(iTimer); 
iTimer = setInterval(function() { 
iSpeedY += 3; 
var l = obj.offsetLeft + iSpeedX; 
var t = obj.offsetTop + iSpeedY; 
if (t >= document.documentElement.clientHeight - obj.offsetHeight) { 
iSpeedY *= -0.8; 
iSpeedX *= 0.8; 
t = document.documentElement.clientHeight - obj.offsetHeight; 
} else if (t <= 0) { 
iSpeedY *= -1; 
iSpeedX *= 0.8; 
t = 0; 
} 
if (l >= document.documentElement.clientWidth - obj.offsetWidth) { 
iSpeedX *= -0.8; 
l = document.documentElement.clientWidth - obj.offsetWidth; 
} else if (l <= 0) { 
iSpeedX *= -0.8; 
l = 0; 
} 
if (Math.abs(iSpeedX) < 1) { 
iSpeedX = 0; 
} 
if (iSpeedX == 0 && iSpeedY == 0 && t == document.documentElement.clientHeight - obj.offsetHeight) { 
clearInterval(iTimer); 
} 
obj.style.left = l + 'px'; 
obj.style.top = t + 'px'; 
}, 30); 
} 
_this.startMove = function(){ 
obj.onmousedown = function(ev) { 
clearInterval(iTimer); 
var oEvent = ev || event; 
var disX = oEvent.clientX - obj.offsetLeft; 
var disY = oEvent.clientY - obj.offsetTop; 
document.onmousemove = function(ev) { 
var oEvent = ev || event; 
var l = oEvent.clientX - disX; 
var t = oEvent.clientY - disY; 
obj.style.left = l + 'px'; 
obj.style.top = t + 'px'; 
if(iLastX ==0){ 
iLastX = l; 
} 
if(iLastY == 0){ 
iLastY = t; 
} 
iSpeedX = l - iLastX; 
iSpeedY = t - iLastY; 
iLastX = l; 
iLastY = t; 
} 
} 
obj.onmouseup = function() { 
document.onmousedown = null; 
document.onmousemove = null; 
document.onmouseup = null; 
start(); 
} 
start(); 
} 
_this.stopMove = function(){ 
clearInterval(iTimer); 
obj.onmousedown = null; 
document.onmousemove = null; 
obj.onmouseup = null; 
iLastX = 0; 
iLastY = 0; 
iSpeedX = 0; 
iSpeedY = 0; 
disX = 0; 
disY = 0; 
} 
//CONSTRUCT AREA 
var gcdMove = function() { 
if (!iSpeedX) { 
iSpeedX = 0; 
} 
if (!iSpeedY) { 
iSpeedY = 0; 
} 
} 
gcdMove(); 
}