Javascript實(shí)現(xiàn)重力彈跳拖拽運(yùn)動(dòng)效果示例
更新時(shí)間:2013年06月28日 17:32:33 作者:
本文為大家詳細(xì)介紹下使用Javascript實(shí)現(xiàn)重力彈跳拖拽運(yùn)動(dòng)的具體調(diào)用方法,感興趣的朋友可以參考下哈
演示地址:
http://www.ihuxu.com/project/gcdmove/
調(diào)用示例:
var GCDM = gcdMove(oDiv,100,0);
GCDM.startMove();//開(kāi)始運(yùn)動(dòng)
GCDM.stopMove();//結(jié)束運(yùn)動(dòng)
該段JS代碼已經(jīng)封裝好了,代碼如下:
簡(jiǎn)要說(shuō)明 - obj為要改動(dòng)的對(duì)象元素,通常為某個(gè)div;iSpeedX,iSpeedY為div出師的橫向(右側(cè)),豎向(下)的初始速度,當(dāng)然也可以設(shè)為零。
/**
* @Desc 重力碰撞拖拽運(yùn)動(dòng) - 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();
}
http://www.ihuxu.com/project/gcdmove/
調(diào)用示例:
var GCDM = gcdMove(oDiv,100,0);
GCDM.startMove();//開(kāi)始運(yùn)動(dòng)
GCDM.stopMove();//結(jié)束運(yùn)動(dòng)
該段JS代碼已經(jīng)封裝好了,代碼如下:
簡(jiǎn)要說(shuō)明 - obj為要改動(dòng)的對(duì)象元素,通常為某個(gè)div;iSpeedX,iSpeedY為div出師的橫向(右側(cè)),豎向(下)的初始速度,當(dāng)然也可以設(shè)為零。
復(fù)制代碼 代碼如下:
/**
* @Desc 重力碰撞拖拽運(yùn)動(dòng) - 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();
}
您可能感興趣的文章:
- JavaScript運(yùn)動(dòng)框架 鏈?zhǔn)竭\(yùn)動(dòng)到完美運(yùn)動(dòng)(五)
- JS多物體 任意值 鏈?zhǔn)?緩沖運(yùn)動(dòng)
- Js實(shí)現(xiàn)簡(jiǎn)單的小球運(yùn)動(dòng)特效
- js運(yùn)動(dòng)動(dòng)畫的八個(gè)知識(shí)點(diǎn)
- javascript實(shí)現(xiàn)10個(gè)球隨機(jī)運(yùn)動(dòng)、碰撞實(shí)例詳解
- JS實(shí)現(xiàn)勻速運(yùn)動(dòng)的代碼實(shí)例
- 使用JavaScript 實(shí)現(xiàn)對(duì)象 勻速/變速運(yùn)動(dòng)的方法
- js實(shí)現(xiàn)緩沖運(yùn)動(dòng)效果的方法
- JavaScript中的勻速運(yùn)動(dòng)和變速(緩沖)運(yùn)動(dòng)詳細(xì)介紹
- javascript動(dòng)畫之圓形運(yùn)動(dòng),環(huán)繞鼠標(biāo)運(yùn)動(dòng)作小球
- Javascript模擬加速運(yùn)動(dòng)與減速運(yùn)動(dòng)代碼分享
- JS運(yùn)動(dòng)特效之鏈?zhǔn)竭\(yùn)動(dòng)分析
相關(guān)文章
javascript跳轉(zhuǎn)與返回和刷新頁(yè)面的實(shí)例代碼
這篇文章主要介紹了javascript跳轉(zhuǎn)與返回和刷新頁(yè)面的實(shí)例代碼,簡(jiǎn)單介紹了javascript中window.open()與window.location.href的區(qū)別,感興趣的朋友一起看看吧2019-11-11Servlet實(shí)現(xiàn)文件上傳,可多文件上傳示例
本篇文章主要介紹了Servlet實(shí)現(xiàn)文件上傳,可多文件上傳示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12uniapp上傳圖片和上傳視頻的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于uniapp上傳圖片和上傳視頻的實(shí)現(xiàn)方法,文中還介紹了上傳文件的方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01js實(shí)現(xiàn)倒計(jì)時(shí)關(guān)鍵代碼
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)倒計(jì)時(shí)的關(guān)鍵代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05js實(shí)現(xiàn)Form欄顯示全格式時(shí)間時(shí)鐘效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)Form欄顯示全格式時(shí)間時(shí)鐘效果代碼,可讀取當(dāng)前的完整時(shí)間并實(shí)時(shí)顯示,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08JavaScript實(shí)例--實(shí)現(xiàn)計(jì)算器
這篇文章主要介紹了JavaScript實(shí)現(xiàn)計(jì)算器,下面文章實(shí)現(xiàn)計(jì)算器作為學(xué)習(xí)期間的一個(gè)小練習(xí),需要的小伙伴可以參考一下,希望對(duì)你有所幫助2022-01-01