ホームページ > ウェブフロントエンド > jsチュートリアル > 重力バウンスドラッグ移動エフェクトの Javascript 実装 example_JavaScript スキル

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

WBOY
リリース: 2016-05-16 17:30:56
オリジナル
1222 人が閲覧しました
デモアドレス:
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()

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート