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

最新推荐文章于 2022-06-23 15:34:28 发布

sweetllh

最新推荐文章于 2022-06-23 15:34:28 发布

阅读量300

点赞数

分类专栏：面向对象文章标签：面向对象

本文链接：https://blog.csdn.net/sweetllh/article/details/73927384

版权

面向对象专栏收录该内容

28 篇文章 1 订阅

订阅专栏

<!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>

sweetllh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js面向对象的继承实例-call

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ position: relative; } #
复制链接

扫一扫

专栏目录