用dom方法实现京东放大镜功能

最新推荐文章于 2023-08-30 23:12:02 发布

原创最新推荐文章于 2023-08-30 23:12:02 发布 · 305 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

1.首先进行布局

 <div class="box">
        <div class="middle">
            <img src="./image/68d0ac29ce4a326d (1).jpg" alt="#">
        </div>
        <div class="small">
            <span class="leftbtn"><</span>
            <span class="rightbtn">></span>
            <div class="centersmall">  
                <div class="imgbox">
                    <div class="smallimg imgborder" data-middle = "68d0ac29ce4a326d (1).jpg" data-big = "68d0ac29ce4a326d (2).jpg">
                        <img  src="./image/68d0ac29ce4a326d.jpg" alt="">
                    </div>
                    <div  class="imgmar smallimg" data-middle = "68d0ac29ce4a326d (1).jpg" data-big = "68d0ac29ce4a326d (2).jpg"> 
                        <img src="./image/c2686c0274e6ad43.jpg" alt="">
                    </div>
                    <div  class="imgmar smallimg" data-middle = "f6f419ff198375d7 (1).jpg" data-big = "f6f419ff198375d7 (2).jpg">
                        <img src="./image/f6f419ff198375d7.jpg" alt="">
                    </div>
                    <div  class="imgmar smallimg" data-middle = "f7f7f95090f913f9 (1).jpg" data-big = "f7f7f95090f913f9 (2).jpg">
                        <img src="./image/f7f7f95090f913f9.jpg" alt="">
                    </div>
                    <div class="smallimg imgmar" data-middle = "f7f7f95090f913f9 (1).jpg" data-big = "f7f7f95090f913f9 (2).jpg">
                        <img src="./image/40a5449b7770747c.jpg" alt="">
                    </div>
                    <div class="smallimg imgborder imgmar" data-middle = "68d0ac29ce4a326d (1).jpg" data-big = "68d0ac29ce4a326d (2).jpg">
                        <img  src="./image/68d0ac29ce4a326d.jpg" alt="">
                    </div>
                    <div  class=" smallimg imgmar" data-middle = "68d0ac29ce4a326d (1).jpg" data-big = "68d0ac29ce4a326d (2).jpg"> 
                        <img src="./image/c2686c0274e6ad43.jpg" alt="">
                    </div>
                    <div  class=" smallimg" data-middle = "f6f419ff198375d7 (1).jpg" data-big = "f6f419ff198375d7 (2).jpg">
                        <img src="./image/f6f419ff198375d7.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="bigbox">
           
        </div>
    </div>

2.css样式

* {
    margin: 0;
    padding: 0;
}
.box {
    position: relative;
    width: 450px;
    height: 560px;
    border: 1px solid #000;
}
.middle {
    position: relative;
    width: 450px;
    height: 450px;
    cursor: move;
}
.small {
    position: relative;
    overflow: hidden;
    width: 450px;
    height: 90px ;
}
.centersmall {
    overflow: hidden;
    width: 400px;
    height: 90px;
    margin: 10px auto;
}
.imgbox {
    width: 620px;
    height: 70px;
    font-size: 0;
    transition: all .6s linear;
}
.imgbox div {
    position: relative;
    display: inline-block;
    width: 70px;
    height: 70px;
    box-shadow: 0 0 2px #000;
    vertical-align: center;
}
.imgbox div img {
    width: 70px;
    height: 70px;
}
.imgborder {
    box-shadow: 0 0 2px red !important;
}
.imgborder:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    border-width: 10px;
    border-style: solid;
    border-color: transparent red red transparent;

}
.imgmar {
    margin:  5px;
}
.leftbtn ,.rightbtn {
    position: absolute;
    top: 10px;
    display: block;
    z-index: 2;
    width: 12px;
    height: 70px;
    color: red;
    font-size: 12px;
    background:rgba(196, 196, 196, .6);
    line-height: 70px;
    text-align: center;
    opacity: 0;
    transition: all .5s linear;
    cursor: pointer;
}
.leftbtn {
    left: 0;
}
.rightbtn {
    right: 0;
}
.small:hover .leftbtn,.small:hover .rightbtn{
    opacity: 1;
}
.middle img {
    width: 100%;
    height: 100%;
}
.bigbox {
    position: absolute;
    top: -1px;
    left: 450px;
    width: 700px;
    height: 700px;
    border: 1px solid #000;
    background: url(./image/68d0ac29ce4a326d\ \(2\).jpg) no-repeat ;
    background-position: left top;
    display: none;
}
.ceng {
    position: absolute;
    left: 0;
    top: 0;
    background: url(./image/1593846277.png) rgba(120, 120, 120, 0.1);
    background-size: 5px 5px;
}

3.js代码

<script>
        /* 
        1.鼠标进入middle中出现悬停层
        2.离开middle 移除ceng
         */
        var middle = document.getElementsByClassName("middle");
        var bigbox = document.getElementsByClassName("bigbox");
        var smallimg = document.getElementsByClassName("smallimg");
        var ceng = null;
        var wid = null;
        var defaultele = smallimg[0];
        var bili = 800/350;
        middle[0].onmouseenter = function(){
          //创建
          ceng = document.createElement("div")
          ceng.className = "ceng"; 
         //计算成的宽高
         wid = 500/(800/350);
         ceng.style.width = wid+"px";
         ceng.style.height = wid+"px";
          this.appendChild(ceng); 

          //显示最大容器
          bigbox[0].style.display = "block";
        }
        middle[0].onmouseleave = function(){
            ceng.remove();
            //隐藏最大容器
          bigbox[0].style.display = "none";
        }
        middle[0].onmousemove =function(e){
            var pageX = e.clientX|| e.pageX;
            var pageY = e.clientY|| e.pageY;
            //下面是使用三元运算符，限制层的移动区域
            pageX = pageX-wid/2<0?0:pageX-wid/2>=450-wid?450-wid:pageX-wid/2;
            pageY = pageY-wid/2<0?0:pageY-wid/2>=450-wid?450-wid:pageX-wid/2;
            ceng.style.left = pageX+"px";
            ceng.style.top = pageY+"px";

            //bigbox里面的背景图也跟着移动
            bigbox[0].style.backgroundPosition =-pageX*bili+ "0px "+(-pageY*bili)+"0px";//如果使用的复合属性 中间的空格别忘了
        }

        //写小图的点击
        for(var i = 0;i <smallimg.length;i++){
            smallimg[i].onclick = function(){
                //修改当前元素的框颜色
                //让当前的变颜色之前，先去掉之前的颜色
                defaultele.classList.remove("imgborder")
                this.classList.add("imgborder");
                //再次记录当前变色的
                defaultele = this;

                //点击小图对应的中图和大图得切换
                var middleSrc = this.getAttribute("data-middle"); 
                //修改中图的图片路径
                middle[0].children[0].src = "./image/"+middleSrc;
                //修改大图属性
                var bigSrc = this.getAttribute("data-big");
                bigbox[0]. style.backgroundImage = "url('./image/"+bigSrc+"')";
            }
        }
        //点击左右箭头
        leftbtn[0].onclick = function (){
            imgbox[0].style.transform = "translatex(-220px)"
        }
        rightbtn[0].onclick = function (){
            imgbox[0].style.transform = "translatex(0px)"
        }
    </script>