编程语言
首页 > 编程语言> > JavaScript 面向对象编程 编写放大镜

JavaScript 面向对象编程 编写放大镜

作者:互联网

  1. OOA:
    放大镜,等比例移动
    选择元素
    绑定事件
    进入
    显示
    离开
    隐藏
    移动
    遮罩层跟随鼠标移动
    边界限定
    计算移动的距离占了总距离的比例
    根据比例,设置右侧图片的位置

  2. OOD:
    function Magnifier(){
    // 1. 选择元素
    // 2. 绑定事件
    }
    Magnifier.prototype.addEvent = function(){
    // 进入事件
    // 3. 显示
    // 离开事件
    // 4. 隐藏
    // 移动事件
    // 5. 跟随移动功能,计算比例,设置位置
    }
    Magnifier.prototype.show = function(){
    // 显示
    }
    Magnifier.prototype.hide = function(){
    // 隐藏
    }
    Magnifier.prototype.move = function(){
    // 移动
    // 计算比例
    // 设置
    }

  3. oop:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .cont{width:1000px;margin: 0 auto;}
        .cont::after{content: "";width:0;height:0;overflow: hidden;clear: both;display: block;}
        .small_box{width:200px;height:300px;float: left;position: relative}
        .small_box img{width:200px;height:300px;}
        .small_box span{background: rgba(0,0,255,0.7);display: block;position: absolute;left: 0;top:0;display: none}

        .big_box{width:200px;height:300px;float: left;display: none;overflow: hidden;margin-left: 100px;position: relative;}
        .big_box img{width:400px;height:600px;position: absolute;left:0;top:0;}
    </style>
</head>
<body>
    <div class="cont">
        <div class="small_box">
            <img src="https://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=%E5%9B%BE%E7%89%87&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined&copyright=undefined&cs=1091405991,859863778&os=1114394393,554371559&simid=3296715954,119998854&pn=0&rn=1&di=205040&ln=1187&fr=&fmq=1613552244469_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&hs=2&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252Fa1.att.hudong.com%252F62%252F02%252F01300542526392139955025309984.jpg%26refer%3Dhttp%253A%252F%252Fa1.att.hudong.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1616144243%26t%3Da1e2b24e87aa1429d2131860aca3d868&rpstart=0&rpnum=0&adpicid=0&force=undefined" alt="">
            <span></span>
        </div>
        <div class="big_box">
            <img src="https://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=%E5%9B%BE%E7%89%87&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined&copyright=undefined&cs=1091405991,859863778&os=1114394393,554371559&simid=3296715954,119998854&pn=0&rn=1&di=205040&ln=1187&fr=&fmq=1613552244469_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&hs=2&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252Fa1.att.hudong.com%252F62%252F02%252F01300542526392139955025309984.jpg%26refer%3Dhttp%253A%252F%252Fa1.att.hudong.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1616144243%26t%3Da1e2b24e87aa1429d2131860aca3d868&rpstart=0&rpnum=0&adpicid=0&force=undefined" alt="">
        </div>
    </div>
</body>
<script>
        function Magnifier(){
            // 1. 选择元素
            this.sBox = document.querySelector(".small_box");
            this.span = document.querySelector(".small_box span");
            this.bBox = document.querySelector(".big_box");
            this.bImg = document.querySelector(".big_box img");

            // 2. 绑定事件
            this.addEvent();
        }
        Magnifier.prototype.addEvent = function(){
            var that = this;
            // 进入事件
            this.sBox.onmouseover = function(){
                // 3. 显示
                that.show()
            }
            // 离开事件
            this.sBox.onmouseout = function(){
                // 4. 隐藏
                that.hide();
            }
            // 移动事件
            this.sBox.onmousemove = function(eve){
                var e = eve || window.event;
                // 5. 跟随移动功能,计算比例,设置位置
                that.move(e);
            }
        }
        Magnifier.prototype.show = function(){
            // 显示
            this.span.style.display = "block";
            this.bBox.style.display = "block";

            // 计算右侧显示图片的比例
            // 向日葵班:总人30人,出来12人干活
            // 玫瑰班:总人42人,要求出同向日葵班的人数的比例的人数,干活
            // 玫瑰班要出的人数 = (向日葵12人 / 向日葵30人) * 玫瑰班42人

            this.span.style.width = (this.bBox.offsetWidth / this.bImg.offsetWidth) * this.sBox.offsetWidth + "px";
            this.span.style.height = (this.bBox.offsetHeight / this.bImg.offsetHeight) * this.sBox.offsetHeight + "px";

            // 提前获取各种尺寸,方便使用
            this.sBoxW = this.sBox.offsetWidth;
            this.sBoxH = this.sBox.offsetHeight;
            this.sBoxL = this.sBox.offsetLeft;
            this.sBoxT = this.sBox.offsetTop;
            this.spanW = this.span.offsetWidth;
            this.spanH = this.span.offsetHeight;
            this.bBoxW = this.bBox.offsetWidth;
            this.bBoxH = this.bBox.offsetHeight;
            this.bImgW = this.bImg.offsetWidth;
            this.bImgH = this.bImg.offsetHeight;

        }
        Magnifier.prototype.hide = function(){
            // 隐藏
            this.span.style.display = "none";
            this.bBox.style.display = "none";
        }
        Magnifier.prototype.move = function(e){
            // 计算要移动的距离
            var l = e.clientX - this.sBoxL - this.spanW/2;
            var t = e.clientY - this.sBoxT - this.spanH/2;
            // 边界限定
            if(l<0) l=0;
            if(t<0) t=0;
            if(l>this.sBoxW-this.spanW) l=this.sBoxW-this.spanW;
            if(t>this.sBoxH-this.spanH) t=this.sBoxH-this.spanH;

            // 移动
            this.span.style.left = l + "px";
            this.span.style.top = t + "px";
            // 计算比例
            var x = l / (this.sBoxW-this.spanW);
            var y = t / (this.sBoxH-this.spanH);
            // 设置给右侧图片的位置
            this.bImg.style.left = x * -Math.abs(this.bImgW - this.bBoxW) + "px";
            this.bImg.style.top = y * -Math.abs(this.bImgH - this.bBoxH) + "px";
        }


        new Magnifier;
        
</script>
</html>

标签:function,box,style,span,sBox,放大镜,JavaScript,面向对象编程,Magnifier
来源: https://blog.csdn.net/weixin_48065262/article/details/113835598