号称最简便，最独立，可移植性相当高的任意2点div移动的高效js库，提供分享
- HTML code
<html><body> <div id="mydiv" style="width:100px;height:50px;border:1px solid red;position:absolute;"></div> <script> function MoveDiv() { this.move=function(dom,json){ if(((json.y2-json.y1)/(json.x2-json.x1)>0)&&(json.y2-json.y1)>0&&(json.x2-json.x1)>0) { this.freemoveRightDown(dom,json); } if(((json.y2-json.y1)/(json.x2-json.x1)<0)&&(json.y2-json.y1)<0&&(json.x2-json.x1)>0) { this.freemoveRightTop(dom,json); } if(((json.y2-json.y1)/(json.x2-json.x1)>0)&&(json.y2-json.y1)<0&&(json.x2-json.x1)<0) { this.freemoveLeftTop(dom,json); } if(((json.y2-json.y1)/(json.x2-json.x1)<0)&&(json.y2-json.y1)>0&&(json.x2-json.x1)<0) { this.freemoveleftDown(dom,json); } if(json.y2-json.y1==0&&json.x2-json.x1>0) { this.freemoveHright(dom,json); } if(json.y2-json.y1==0&&json.x2-json.x1<0) { this.freemoveHleft(dom,json); } if(json.y2-json.y1>0&&json.x2-json.x1==0) { this.freemoveVleft(dom,json); } if(json.y2-json.y1<0&&json.x2-json.x1==0) { this.freemoveVright(dom,json); } } } MoveDiv.prototype={ freemoveVright:function(dom,json){ this._dom=dom; this._o=json; this._oleft=this._o.x1; this._otop=this._o.y1; this.speed=1; var _this=this; var int=setInterval( function(){ _this._oleft=parseFloat(_this._oleft); _this._dom.style.left = _this._oleft+"px"; _this._otop=parseFloat(_this._otop)-(_this.speed); _this._dom.style.top = _this._otop+"px"; if(_this._otop<_this._o.y2) { int=window.clearInterval(int); } },5); }, freemoveVleft:function(dom,json){ this._dom=dom; this._o=json; this._oleft=this._o.x1; this._otop=this._o.y1; this.speed=1; var _this=this; var int=setInterval( function(){ _this._oleft=parseFloat(_this._oleft); _this._dom.style.left = _this._oleft+"px"; _this._otop=parseFloat(_this._otop)+(_this.speed); _this._dom.style.top = _this._otop+"px"; if(_this._otop>_this._o.y2) { int=window.clearInterval(int); } },5); }, freemoveHleft:function(dom,json){ this._dom=dom; this._o=json; this._oleft=this._o.x1; this._otop=this._o.y1; this.speed=1; var _this=this; var int=setInterval( function(){ _this._oleft=parseFloat(_this._oleft)-(_this.speed); _this._dom.style.left = _this._oleft+"px"; _this._otop=parseFloat(_this._otop); _this._dom.style.top = _this._otop+"px"; if(_this._oleft<_this._o.x2) { int=window.clearInterval(int); } },5); }, freemoveHright:function(dom,json){ this._dom=dom; this._o=json; this._oleft=this._o.x1; this._otop=this._o.y1; this.speed=1; var _this=this; var int=setInterval( function(){ _this._oleft=parseFloat(_this._oleft)+(_this.speed); _this._dom.style.left = _this._oleft+"px"; _this._otop=parseFloat(_this._otop); _this._dom.style.top = _this._otop+"px"; if(_this._oleft>_this._o.x2) { int=window.clearInterval(int); } },5); }, //右下情况 有效. freemoveRightDown:function(dom,json){ this._dom=dom; this._o=json; this._oleft=this._o.x1; this._otop=this._o.y1; this.speed=1; this.rotation=Math.atan((this._o.y2-this._o.y1)/(this._o.x2-this._o.x1))*180/Math.PI; var _this=this; var int=setInterval( function(){ _this._oleft=parseFloat(_this._oleft)+Math.sin(Math.PI/2-_this.rotation * Math.PI / 180)*(_this.speed); _this._dom.style.left = _this._oleft+"px"; _this._otop=parseFloat(_this._otop)+Math.cos(Math.PI/2-_this.rotation * Math.PI / 180)*(_this.speed); _this._dom.style.top = _this._otop+"px"; if(_this._oleft>_this._o.x2||_this._otop>_this._o.y2) { int=window.clearInterval(int); } },5); }, //左上情况 有效. freemoveLeftTop:function(dom,json){ this._dom=dom; this._o=json; this._oleft=this._o.x1; this._otop=this._o.y1; this.speed=1; this.rotation=Math.atan((this._o.y2-this._o.y1)/(this._o.x2-this._o.x1))*180/Math.PI; var _this=this; var int=setInterval( function(){ _this._oleft=parseFloat(_this._oleft)-Math.sin(Math.PI/2-_this.rotation * Math.PI / 180)*(_this.speed); _this._dom.style.left = _this._oleft+"px"; _this._otop=parseFloat(_this._otop)-Math.cos(Math.PI/2-_this.rotation * Math.PI / 180)*(_this.speed); _this._dom.style.top = _this._otop+"px"; if(_this._oleft<_this._o.x2||_this._otop<_this._o.y2) { int=window.clearInterval(int); } },5); }, //右上情况 有效. freemoveRightTop:function(dom,json){ this._dom=dom; this._o=json; this._oleft=this._o.x1; this._otop=this._o.y1; this.speed=1; this.rotation=Math.atan((this._o.y2-this._o.y1)/(this._o.x2-this._o.x1))*180/Math.PI; var _this=this; var int=setInterval( function(){ _this._oleft=parseFloat(_this._oleft)+Math.sin(Math.PI/2-_this.rotation * Math.PI / 180)*(_this.speed); _this._dom.style.left = _this._oleft+"px"; _this._otop=parseFloat(_this._otop)+Math.cos(Math.PI/2-_this.rotation * Math.PI / 180)*(_this.speed); _this._dom.style.top = _this._otop+"px"; if(_this._oleft>_this._o.x2||_this._otop<_this._o.y2) { int=window.clearInterval(int); } },5); }, //右上情况 有效. freemoveleftDown:function(dom,json){ this._dom=dom; this._o=json; this._oleft=this._o.x1; this._otop=this._o.y1; this.speed=1; this.rotation=Math.atan((this._o.y2-this._o.y1)/(this._o.x2-this._o.x1))*180/Math.PI; var _this=this; var int=setInterval( function(){ _this._oleft=parseFloat(_this._oleft)-Math.sin(Math.PI/2-_this.rotation * Math.PI / 180)*(_this.speed); _this._dom.style.left = _this._oleft+"px"; _this._otop=parseFloat(_this._otop)-Math.cos(Math.PI/2-_this.rotation * Math.PI / 180)*(_this.speed); _this._dom.style.top = _this._otop+"px"; if(_this._oleft<_this._o.x2||_this._otop>_this._o.y2) { int=window.clearInterval(int); } },5); } } var drag=new MoveDiv(); drag.move(document.getElementById("mydiv"),{x1:"0",y1:"300",x2:"500",y2:"300"}); </script></body></html>
使用方法
- JScript code
var drag=new MoveDiv(); drag.move(document.getElementById("mydiv"),{x1:"0",y1:"300",x2:"500",y2:"300"});//第一个参数为对象，第二个参数为2点坐标，this.speed 参数为速度。欢迎在项目中实战[解决办法]
谢谢分享
[解决办法]
推荐一个在线调试脚本的工具：jsbin.com 比之前的 jsfiddle.net 好用
http://jsbin.com/imiwox/edit#html,live
[解决办法]
结合你研究的移动可以实现更多的效果，可以参考一下：http://pablotron.org/software/easing-js/test/
[解决办法]
学习了
[解决办法]