号称最简便,最独立,可移植性相当高的任意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>