js面向对象的继承实例-call

来源：互联网发布：推荐淘宝靠谱的代购店编辑：程序博客网时间：2024/05/29 03:42
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            body{                position: relative;            }            #box{                position: absolute;                width: 150px;                height: 150px;                background: #f00;                cursor: default;            }            #box2{                position: absolute;                left: 300px;                top: 300px;                width: 150px;                height: 150px;                background: #00f;                cursor: default;            }        </style>    </head>    <body>        <div id="box"></div>        <div id="box2"></div>    </body>    <!--面向对象的继承-->    <script type="text/javascript">        window.onload = function(){            var d1 = new Drag('box');            d1.init();            var d2 = new Cdrag('box2');            d2.init();        }    //  构造函数    function Drag(id){        this.oBox = document.getElementById(id);        this.disX = 0;        this.disY = 0;    }    //方法            ev事件写在函数下面    Drag.prototype.init = function(){        var _this = this;        this.oBox.onmousedown = function(ev){            var ev = ev || window.event;            _this.fnDown(ev);        };    }    Drag.prototype.fnDown = function(ev){        var _this = this;        this.disX = ev.clientX -  this.oBox.offsetLeft;        this.disY = ev.clientY -  this.oBox.offsetTop;        document.onmousemove = function(ev){            var ev = ev || window.event;            _this.fnMove(ev);        };        document.onmouseup = function(){            _this.fnUp();        };        return false;    }    Drag.prototype.fnMove = function(ev){        this.oBox.style.left = ev.clientX - this.disX + "px";        this.oBox.style.top = ev.clientY - this.disY + "px";    }    Drag.prototype.fnUp = function(){        document.onmousemove = null;        document.onmouseup = null;    }    //构造一个子类实现父类的继承，还有自己的功能    //属性的继承    function Cdrag(id){        Drag.call(this,id);    };    //方法的继承    for(var i in Drag.prototype){        Cdrag.prototype[i] = Drag.prototype[i];    };    //新建自己的方法    Cdrag.prototype.fnMove = function(ev){        var ev = ev || event;        var l = ev.clientX -  this.disX;        var t = ev.clientY -  this.disY ;        if(l<0){            l = 0;        }        else if(l>document.documentElement.clientWidth - this.oBox.offsetWidth){            l = document.documentElement.clientWidth - this.oBox.offsetWidth;        }        if(t<0){            t = 0;        }        else if(t>document.documentElement.clientHeight - this.oBox.offsetHeight){            t = document.documentElement.clientHeight - this.oBox.offsetHeight;        }        this.oBox.style.left = l + "px";        this.oBox.style.top = t + "px";    }    </script></html>
阅读全文
0 0