Javascript实现重力弹跳拖拽运动效果示例_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;//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();
}

时间: 2024-09-20 22:42:59

Javascript实现重力弹跳拖拽运动效果示例_javascript技巧的相关文章

Javascript实现重力弹跳拖拽运动效果示例

本文为大家详细介绍下使用Javascript实现重力弹跳拖拽运动的具体调用方法,感兴趣的朋友可以参考下哈   演示地址: http://www.ihuxu.com/project/gcdmove/ 调用示例: var GCDM = gcdMove(oDiv,100,0); GCDM.startMove();//开始运动 GCDM.stopMove();//结束运动 该段JS代码已经封装好了,代码如下: 简要说明 - obj为要改动的对象元素,通常为某个div:iSpeedX,iSpeedY为di

JavaScript模拟重力状态下抛物运动的方法_javascript技巧

本文实例讲述了JavaScript模拟重力状态下抛物运动的方法.分享给大家供大家参考.具体分析如下: 这段JavaScript代码模拟重力状态下的抛物运动,可设置以下参数:横向初速度.纵向初速度.重力加速度(如果这个加速度是一个随时间变化的值,就能达到其他非匀加速运动的效果了).动画间隔时间等,相对专业 <!doctype html> <html> <head> <title>js抛物运动</title> <meta charset=&qu

asp.net中Wpf拖拽滑动效果示例

wpf其实支持拖拽是很简单的.使用drag事件或者自定义鼠标事件都是可以实现的. 今天分享一个用鼠标的点击和up事件实现的拖拽滑动效果. 首先在xaml中定义一个ScrollViewer.  代码如下 复制代码 <Window x:Class="Wpf拖拽滑动效果.MainWindow"  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http:

利用JavaScript实现拖拽改变元素大小_javascript技巧

大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当点击这个范围时表明我们想要改变它的大小 当我们点击方块的这些红色区域时,方快就知道我们想要改变它的大小 代码实现: // 获取event对象,兼容性写法 var ev = ev || event; // 鼠标按下时的位置 var mouseDownX = ev.clientX; var mouseDownY = ev.clientY; // 方块上下

javascript完美拖拽的实现方法_javascript技巧

HTML代码: 复制代码 代码如下: <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="style.css" /><script type="text/javascri

JS HTML5拖拽上传图片预览_javascript技巧

1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块.总之,file对象包含与FlieList对象,而file对象继承于Blob对象! 各对象的相关属性关系: FileReader接口: 由图可知:HTML5还提供了FileReader接口:用于将文件读入内存,并读取

JS拖拽插件实现步骤_javascript技巧

这篇文章详细介绍了JS拖拽插件的实现步骤,主要从以下六步做详细分析,具体内容如下: 一.js拖拽插件的原理 二.根据原理实现的最基本效果 三.代码抽象与优化 四.扩展:有效的拖拽元素 五.性能优化和总结 六.jquery插件化 js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠标 3.拖拽元素到一定位置,放开鼠标 这里的过程涉及到三个dom事件:on

JS仿iGoogle自定义首页模块拖拽特效的方法_javascript技巧

本文实例讲述了JS仿iGoogle自定义首页模块拖拽特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

Draggable Elements 元素拖拽功能实现代码_javascript技巧

当然我们可以研究js库的源码, 也可以自己去发明轮子试试看, 其过程还是挺有趣的...下面我就来实现下页面元素的拖拽功能 现在就开始着手实现, 让我们从最顶层的方法讲起, 它用于初始化一个drag object, 方法的声明如下 function DragObject(cfg) 这里的cfg我们用一个对象来传入, 有点像Extjs里配置属性 复制代码 代码如下: var dragObj = new DragObject({ el: 'exampleB', attachEl: 'exampleBH