京东放大镜

最新推荐文章于 2024-11-21 16:02:10 发布

weixin_45955339

最新推荐文章于 2024-11-21 16:02:10 发布

阅读量131

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_45955339/article/details/106262300

版权

在这里插入图片描述

HTML结构

1、搭建一个大盒子，大盒子部分包括中图盒子和下面的小图盒子，至于黄色的层和大图的盒子可以让其绝对定位在中图的盒子中，调整其位置即可。左右小按钮用a链接加背景图生成。具体代码如下
HTML代码

    <div class="box">
        <div class="preview_img ">
            <img src="img/middle1.jpg" alt="">
            <div class="big">
                <img src="img/big1.jpg" alt="" class="bigImg">
            </div>
            <div class="mask"></div>
        </div>
        <div class="foot">
            <div class="ull">
                <ul>
                    <li class=" border"><img class="active" src="img/small1.jpg" alt="" data-middle="img/middle1.jpg" data-big="img/big1.jpg"></li>
                    <li><img class="active" src="img/small2.jpg" alt="" data-middle="img/middle2.jpg" data-big="img/big2.jpg"></li>
                    <li><img class="active" src="img/small3.jpg" alt="" data-middle="img/middle3.jpg" data-big="img/big3.jpg"></li>
                    <li><img class="active" src="img/small4.jpg" alt="" data-middle="img/middle4.jpg" data-big="img/big4.jpg"></li>
                    <li><img class="active" src="img/small5.jpg" alt="" data-middle="img/middle5.jpg" data-big="img/big5.jpg"></li>
                    <li><img class="active " src="img/small4.jpg" alt="" data-middle="img/middle4.jpg" data-big="img/big4.jpg"></li>
                    <li><img class="active " src="img/small5.jpg" alt="" data-middle="img/middle5.jpg" data-big="img/big5.jpg"></li>
                    <li><img class="active" src="img/small5.jpg" alt="" data-middle="img/middle5.jpg" data-big="img/big5.jpg"></li>
                </ul>
            </div>
            <a href="#" class="arrow_prev"></a>
            <a href="#" class="arrow_next"></a>
        </div>
    </div>

CSS部分

css部分比较简单具体代码如下黄色的层我们可以使用背景图片做也可以用合适的背景颜色，降低透明度即可
具体代码如下

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        
        .box {
            width: 350px;
            height: 410px;
            margin-left: 100px;
            border: #000000 1px solid;
        }
        
        .preview_img {
            position: relative;
            width: 350px;
            height: 350px;
            border: 1px solid #cccccc;
            cursor: move;
        }
        
        .foot {
            position: relative;
            height: 60px;
            width: 350px;
            border: 1px solid pink;
            overflow: hidden;
        }
        
        .foot ul {
            width: 472px;
            margin: 0 20px;
            transition: all .6s linear;
        }
        
        .foot .ull {
            width: 472px;
        }
        
        .foot ul li {
            margin-left: 7px;
            float: left;
            border: 1px #cccccc solid;
        }
        
        .arrow_prev,
        .arrow_next {
            position: absolute;
            top: 15px;
            width: 22px;
            height: 32px;
            background-color: purple;
            z-index: 999;
        }
        
        .arrow_prev {
            left: 0;
            background: url(img/arrow-prev.png) no-repeat;
        }
        
        .arrow_next {
            right: 0;
            background: url(img/arrow-next.png) no-repeat;
        }
        
        .big {
            display: none;
            position: absolute;
            left: 350px;
            top: 0;
            width: 500px;
            height: 500px;
            background-color: pink;
            z-index: 999;
            border: 1px solid #ccc;
            overflow: hidden;
        }
        
        .big img {
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background: #FEDE4F;
            opacity: .5;
            border: 1px solid #ccc;
            cursor: move;
        }
    </style>

js部分

获取所需元素后第一部分实现鼠标经过中图时，黄色的遮挡层和大图片盒子显示，离开隐藏的功能，这部分比较简单，操作元素的样式就可以完成

   <script>
        var preview_img = document.querySelector('.preview_img');
        var mask = document.querySelector('.mask');
        var big = document.querySelector('.big');
        var left_btn = document.querySelector(" .arrow_prev");
        var right_btn = document.querySelector(".arrow_next");
        var ul = document.querySelector(".foot").querySelector("ul");
        var li = document.querySelectorAll("li");
        var li_img = document.querySelector(".foot").querySelectorAll("img");
        var preview_Img = document.querySelector(".preview_img").querySelector("img");
        // 1. 当我们鼠标经过 preview_img 就显示 mask 遮挡层 和 big 大盒子
        preview_img.addEventListener('mouseover', function() {
            mask.style.display = 'block';
            big.style.display = 'block';
        })
        当我们鼠标离开 preview_img 就隐藏 mask 遮挡层 和 big 大盒子
        preview_img.addEventListener('mouseout', function() {
                mask.style.display = 'none';
                big.style.display = 'none';
            })

第二部分实现鼠标移动时黄色的遮挡层随着鼠标的移动而移动
1、首先获得鼠标在盒子的坐标，之后把数值给遮挡层作为left 和top值，同时让鼠标位于盒子的中间位置
2、使黄色盒子在中图盒子内移动，如果小于0，就把坐标设置成0，如果大于遮挡层最大的移动距离，就把坐标设置成最大的移动距离
3、遮挡层的最大移动距离就等于中图盒子的宽度减去遮挡层盒子的宽度

  preview_img.addEventListener('mousemove', function(e) {
            // (1). 先计算出鼠标在盒子内的坐标
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            //让鼠标在盒子的中间
            var maskX = x - mask.offsetWidth / 2;
            var maskY = y - mask.offsetHeight / 2;
            var maskMax = preview_img.offsetWidth - mask.offsetWidth;
            //x的坐标小于0就让它等于0  
            if (maskX <= 0) {
                maskX = 0;
            } else if (maskX >= maskMax) {
                maskX = maskMax;
            }
            if (maskY <= 0) {
                maskY = 0;
            } else if (maskY >= maskMax) {
                maskY = maskMax;
            }
            mask.style.left = maskX + 'px';
            mask.style.top = maskY + 'px';

第三部分让大图随着中图的移动反向移动
大图的移动距离公式
遮挡层移动距离 / 遮挡层最大移动距离 = 大图片移动距离 / 大图片最大移动距离

 //大图
            var bigIMg = document.querySelector('.bigImg');
            //大图的最大移动距离
            var bigMax = bigIMg.offsetWidth - big.offsetWidth;
            //大图的移动距离 X Y
            var bigX = maskX * bigMax / maskMax;
            var bigY = maskY * bigMax / maskMax;
            //反方向移动  应为负值
            bigIMg.style.left = -bigX + 'px';
            bigIMg.style.top = -bigY + 'px';
        })

第四部分获取下面下图并让其点击切换
获取每一个li里面的图片，当点击小图时让中图的路径等于小图里设置的自定义属性的路径

  var bigimg = big.querySelector("img");
        //获取每一个li里面的图片
        for (var i = 0; i < li_img.length; i++) {
            //当点击小图时  让中图的路径等于小图里设置的自定义属性的路径
            li_img[i].onclick = function() {
                for (var i = 0; i < li_img.length; i++) {
                    //先让其他的类为空
                    li_img.className = "";
                }
                //点击当前图片让其加上这个类
                this.className = "active";
                preview_Img.src = this.getAttribute("data-middle");
                bigimg.src = this.getAttribute("data-big");

            }
        }

最后让其点击左右按钮滑动
点击按钮时操作按钮的样式让其左右滑动即可

    //点击左右按钮时让其滑动
        left_btn.onclick = function() {
            ul.style.transform = "translateX(-120px)";
        }
        right_btn.onclick = function() {
            ul.style.transform = "translateX(0px)";

        }