当前位置: 代码迷 >> JavaScript >> 号称最简便,最独立,可移植性相当高的任意2点div移动的高效js库,提供分享,该怎么处理
  详细解决方案

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

热度:396   发布时间:2012-02-06 15:52:44.0
号称最简便,最独立,可移植性相当高的任意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>