重力バウンスドラッグ移動エフェクトの Javascript 実装 example

重力バウンスドラッグ移動エフェクトの Javascript 実装 example_JavaScript スキル

WBOY

リリース： 2016-05-16 17:30:56

オリジナル

1205 人が閲覧しました

デモアドレス:
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;//公開識別子 
// fun 
var gcdMove を構築します 
// 自己定義の fun 
var start; 
 _this.startMove; 
//その他 var 
var iTimer; 
var iLastY = 0; ) { 
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 iSpeedY *= -1; 
t = 0; >= document.documentElement.clientWidth - obj.offsetWidth) { 
iSpeedX *= -0.8; 
l = document.documentElement.clientWidth - obj.offsetWidth>} else if (l iSpeedX *= -0.8; 
l = 0; 
if (Math.abs(iSpeedX) 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 || 
var disX = oEvent.clientX - obj.offsetTop; 
 document.onmousemove = function(ev) { 
var oEvent = ev || イベント; 
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; 
iLastX = l; ; 
} 
} 
obj.onmouseup = function() { 
document.onmousemove = null; 
} 
start(); 
_this.stopMove = function(){ 
obj.onmousedown = null; document.onmousemove = null; 
iLastX = 0; 
iSpeedY = 0; 
 disY = 0; 
} 
//CONSTRUCT AREA 
var gcdMove = function() { 
if (!iSpeedX) { 
iSpeedX = 0; >if ( !iSpeedY) { 
iSpeedY = 0; 
} 
gcdMove() 