중력 튀는 드래그 이동 효과의 Javascript 구현 example_javascript 기술

데모 주소:
http://www.ihuxu.com/project/gcdmove/

호출 예:
var GCDM = gcdMove(oDiv ,100,0);
GCDM.startMove();//이동 시작
GCDM.stopMove();//이동 종료
이 JS 코드는 캡슐화되었으며 코드는 다음과 같습니다.
간략한 설명 - obj는 변경될 객체 요소이며, 일반적으로 특정 div의 iSpeedX 및 iSpeedY는 div의 가로(오른쪽) 및 세로(하단) 방향의 초기 속도로 설정할 수도 있습니다. 영.

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

/**
* @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;//공개 식별자
//construct fun
var gcdMove;//자체 정의 fun
var start;
_this.startMove;//other var
var iTimer;
var iLastX = 0;
var iLastY = 0; //construct fun
) {
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; >= 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 =
iLastY = t ;
}
}
obj.onmouseup = function() {
document.onmousedown = null;
document.onmousemove = null; start() ;
}
start();
}
_this.stopMove = function(){
clearInterval(iTimer)
obj.onmousedown = null; document.onmousemove = null;
iLastX = 0;
iSpeedX = 0;
disX = 0;
disY = 0;
}
//구성 영역
var gcdMove = function() {
if (!iSpeedX) {
iSpeedX = 0
>if ( !iSpeedY) {
iSpeedY = 0;
}
}
gcdMove()
}