用面向对象语法写个放大镜

最新推荐文章于 2022-02-13 16:48:25 发布

星野丶Z

最新推荐文章于 2022-02-13 16:48:25 发布

阅读量209

点赞数 1

分类专栏：放大镜面向对象 css样式文章标签： css html js jquery es6

本文链接：https://blog.csdn.net/weixin_49256908/article/details/107938107

版权

面向对象同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

css样式

5 篇文章 0 订阅

订阅专栏

放大镜

1 篇文章 0 订阅

订阅专栏

相信大家都买过东西吧，在查看产品详情的时候鼠标放在商品图片上会有一个放大效果，今天做的就是这个效果
首先分析一下：
// "放大"镜：等比例移动
// 1. 选择元素
// 2. 补全布局：js获取不到页面上设置了display:none的元素的尺寸
// 3. 绑定事件
// 进入：
// 4. 显示对应元素
// 离开
// 5. 隐藏对应元素
// 移动
// 6. 设置span的跟随鼠标
// 7. 计算比例
// 8. 根据比例计算右侧大图移动的距离
// 设计：
// class Magnifier{
// constructor(){
// // 选择元素
// this.init();
// this.addEvent();
// }
// init(){
// // 补全布局
// }
// addEvent(){
// // 进入
// this.over()
// // 离开
// this.out()
// // 移动
// this.move()
// }
// move(){
// // 设置span位置,计算比例,根据比例计算位置
// }
// over(){
// // 显示对应元素
// }
// out(){
// // 隐藏对应元素
// }
// }

下面我们来看代码：
基本布局和css：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .small-box{width:400px;height:300px;float: left;position: relative;margin:50px;}
        .small-box img{width: 400px;height:300px;}
        .small-box span{background: rgba(200,200,200,0.6);position: absolute;left:0;top:0;display: none;}
        .small-box p{margin: 0;width: 100%;height:100%;position: absolute;z-index: 1;left:0;top:0;}

        .large-box{width:400px;height:300px;overflow: hidden;float: left;display:none;position: relative;}
        .large-box img{width: 1200px;height:900px;position: absolute;}

    </style>
</head>
<body>
    <div class="small-box">
        <img src="img/1.jpg" alt="">
        <span></span>
        <p></p>
    </div>
    <div class="large-box">
        <img src="img/1.jpg" alt="">
    </div>

下面是js代码：

<script>
 class Magnifier{
            constructor(){
                // 选择元素
                this.sBox = document.querySelector(".small-box");
                this.span = this.sBox.getElementsByTagName("span")[0];
                this.lBox = document.querySelector(".large-box");
                this.lImg = this.lBox.children[0];

                // this.init();
                this.addEvent();
            }
            init(){
                // 补全布局
                // span的尺寸
                // 根据大图在右侧框中的比例，计算

                // span的比例 = 右侧图的宽 / y右侧框的宽
                // span的宽 = 左侧框的框 / span的比例
                
                this.span.style.width = this.sBox.offsetWidth / (this.lImg.offsetWidth / this.lBox.offsetWidth) + "px";
                this.span.style.height = this.sBox.offsetHeight / (this.lImg.offsetHeight / this.lBox.offsetHeight) + "px";
            }
            addEvent(){
                var that = this;
                // 进入
                this.sBox.onmouseover = function(){
                    that.over()
                }
                // 离开
                this.sBox.onmouseout = function(){
                    that.out()
                }
                // 移动
                this.sBox.onmousemove = function(eve){
                    var e = eve || window.event;
                    that.move(e);
                }
            }
            move(e){
                // 设置span位置
                // this.span.style.left = e.clientX - this.sBox.offsetLeft + "px";
                // this.span.style.top = e.clientY - this.sBox.offsetTop+ "px";
                // span的边界限定
                var l = e.offsetX - this.span.offsetWidth/2;
                var t = e.offsetY - this.span.offsetHeight/2;
                if(l<0) l=0;
                if(t<0) t=0;
                if(l> this.sBox.offsetWidth-this.span.offsetWidth){
                    l = this.sBox.offsetWidth-this.span.offsetWidth
                }
                if(t> this.sBox.offsetHeight-this.span.offsetHeight){
                    t = this.sBox.offsetHeight-this.span.offsetHeight
                }
                // 设置span的位置
                this.span.style.left = l + "px";
                this.span.style.top = t + "px";
                
                // 计算比例
                var x = l / (this.sBox.offsetWidth-this.span.offsetWidth);
                var y = t / (this.sBox.offsetHeight-this.span.offsetHeight);
                // console.log(x, y)
                // 根据比例计算位置
                this.lImg.style.left = (this.lBox.offsetWidth - this.lImg.offsetWidth) * x + "px";
                this.lImg.style.top = (this.lBox.offsetHeight - this.lImg.offsetHeight) * y + "px";
            }
            over(){
                // 显示对应元素
                this.span.style.display = "block";
                this.lBox.style.display = "block";

                // 补全布局
                this.init();
            }
            out(){
                // 隐藏对应元素
                this.span.style.display = "none";
                this.lBox.style.display = "none";
            }
        }
        new Magnifier();

</script>
</body>
</html>

下面是见证奇迹的时刻，效果展示：

在这里插入图片描述

星野丶Z

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用面向对象语法写个放大镜

相信大家都买过东西吧，在查看产品详情的时候鼠标放在商品图片上会有一个放大效果，今天做的就是这个效果首先分析一下：// "放大"镜：等比例移动// 1. 选择元素// 2. 补全布局：js获取不到页面上设置了display:none的元素的尺寸// 3. 绑定事件// 进入：// 4. 显示对应元素// 离开// 5. 隐藏对应元素// 移动// 6. 设置span的跟随鼠标// 7. 计算比例// 8. 根据比例计算右侧大图移动的距离//
复制链接

扫一扫