号称最简便，最独立，可移植性相当高的任意2点div移动的高效js库，提供分享

<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>使用方法
var drag=new MoveDiv(); 
drag.move(document.getElementById("mydiv"),{x1:"0",y1:"300",x2:"500",y2:"300"});
//第一个参数为对象，第二个参数为2点坐标，
this.speed 参数为速度。欢迎在项目中实战

解决方案 »

  1.   

    推荐一个在线调试脚本的工具：jsbin.com 比之前的 jsfiddle.net 好用
    http://jsbin.com/imiwox/edit#html,live
      

  2.   

    结合你研究的移动可以实现更多的效果，可以参考一下：http://pablotron.org/software/easing-js/test/
      

  3.   

    功能你自己试试就知道了，保存以后会生成一个唯一的id，用来分享交流：http://jsbin.com/imiwox
      

  4.   


    真是强中自有强中手啊！！学习ing……
      

  5.   

    玩下这个工具，只是平移还是比较好弄的。
    http://jsbin.com/esofom/edit#preview
      

  6.   

    你打开chore浏览器 查看的 后台 你看它的 层移动代码  非常简洁    
      

  7.   


    这个很简洁啊，不过我估计这是在游戏中用的，鼠标操作，不适合常规的web网站，越是简洁就越难改。
      

  8.   

    这个没关系，你看明白就容易改了。
    两点看作一个直角三角形的斜边。
    //两点距离,即斜边长
    ,distance            = Math.sqrt(Math.pow(traceX-objX ,2)+Math.pow(traceY-objY,2))
    //sin值(对边/斜边)
    ,s                   = (traceY-objY)/distance 
    //cos值(邻边/斜边)
    ,c                   = (traceX-objX)/distance
    //斜边每次移动的长度,所以有y/t = s,x/t = c,y和x分别为每次t移动后算出的x,y轴移动步长
    ,t                   = 0;
    你不需要判定那8个移动方位，套入几何公式即可。