js实现放大镜效果

最新推荐文章于 2023-06-21 21:11:26 发布

进撃的小胖

最新推荐文章于 2023-06-21 21:11:26 发布

阅读量274

点赞数

分类专栏： js常见应用文章标签： js效果放大镜实现

本文链接：https://blog.csdn.net/qq_37194256/article/details/102709872

版权

js常见应用专栏收录该内容

2 篇文章 0 订阅

订阅专栏

购物网站放大镜效果js代码实现

放大镜的实现关键点在于考虑放大比例与阴影部分的关系,即:

//小图:大图 = 遮罩 :大图显示区

其中,小图部分指的是网页加载时看到的原比例图片,大图部分指的是通常被隐藏显示的img标签,遮罩部分即小图上提示放大的区域,大图显示区即相当于在大图上的相对位置,其比例与遮罩之于小图部分相同
具体代码如下:
html部分:

<body>
    <div id="box">
        <div id="shadow"></div>
        <img src="../source/girlbig1.jpg" alt="" class="active">
        <!-- <img src="../source/girlbig2.jpg" alt="">
        <img src="../source/girlbig3.jpg" alt="">
        <img src="../source/girlbig4.jpg" alt=""> -->
    </div>
    <ul id="nav">
        <li><img src="../source/girlbig1.jpg" alt=""></li>
        <li><img src="../source/girlbig2.jpg" alt=""></li>
        <li><img src="../source/girlbig3.jpg" alt=""></li>
        <li><img src="../source/girlbig4.jpg" alt=""></li>
    </ul>
    <div id="bigShadow">
        <img src="" alt="">
    </div>
</body>

css部分:

<style>
        * {
            padding: 0;
            margin: 0;
        }

        #box {
            width: 400px;
            height: 400px;
            overflow: hidden;
            position: relative;
        }

        #box .active {
            width: 400px;
            height: 400px;
            display: block;
        }

        #box img {
            width: 400px;
            height: 400px;
            float: left;
            display: none;
        }

        #shadow {
            width: 150px;
            height: 150px;
            background: rgba(0, 0, 0, 0.5);
            /* float: left; */
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        #nav {
            width: 400px;
            height: 100px;
            list-style: none;
            position: absolute;
            top: 400px;
            left: 0;
        }

        #nav li {
            width: 100px;
            height: 100px;
            float: left;
        }

        #nav li img {
            width: 100px;
            height: 100px;
        }
        #bigShadow{
            width: 300px;
            height: 300px;
            position: absolute;
            top:20px;
            left: 450px;
            background-color: #f00;
            overflow: hidden;
            display: none;
        }
        #bigShadow img{
            width: 800px;
            height: 800px;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>

js部分:

<script>//  400  800       150    300
    //关键: 小图:大图 = 遮罩 :大图显示区
    var active = document.querySelectorAll("active");
    var box = document.querySelector("#box");
    var nav = document.querySelector("#nav");
    var img = document.querySelector("#box img");
    // var img = document.querySelectorAll("#box img");
    var shadow = document.querySelector("#shadow");
    var bigShadow=document.querySelector("#bigShadow");

    //遮罩部分宽度
    var shadowWidth=getStyle(shadow,"width");
    //大图显示部分宽度
    var bigShadowWidth=getStyle(bigShadow,"width");

    //放大比例
    var scale=parseInt(parseInt(bigShadowWidth)/parseInt(shadowWidth));

    console.log(nav.children);
    var li = nav.children;
    for (var i = 0; i < nav.children.length; i++) {
        //移动切换
        li[i].index = i;
        li[i].onmouseenter = function (e) {
            var ev = event || e;
            var target = ev.target;
            console.log(ev);
            if (target.nodeName == "LI") {
                // for(var i=0;i<img.length;i++){
                //     img[i].classList.remove("active");
                // }
                // img[this.index].classList.add("active");
               img.src=this.children[0].src;
            }
        }
    }

    box.onmouseenter = function (e) {
        var ev = event || e;
        var x = ev.x;
        var y = ev.y;
        document.onmousemove = function (e) {
            shadow.style.display="block";
            bigShadow.style.display="block";
            var ev = event || e;
            var nx = ev.x;
            var ny = ev.y;
            var bigImg=bigShadow.children[0];
            var left = 0, top = 0;
            var bigShadowLeft=0,bigShadowTop=0;
            //边界条件
            //左右边框
            if (nx <= parseInt(shadow.offsetWidth / 2)) {
                left = 0;
            }else if (nx > box.offsetWidth - parseInt(shadow.offsetWidth / 2)) {
                left = box.offsetWidth - shadow.offsetWidth;
            } else {
                left = nx - parseInt(shadow.offsetWidth / 2);
            }

            //上边框
            if (ny <= parseInt(shadow.offsetHeight / 2)) {
                top = 0;
            } else if (ny >= box.offsetHeight - parseInt(shadow.offsetHeight / 2)) {
                top = box.offsetHeight - shadow.offsetHeight;
            } else {
                top = ny - parseInt(shadow.offsetHeight / 2);
            }
            shadow.style.left = `${left}px`;
            shadow.style.top = `${top}px`;

            bigImg.src=box.children[1].src;
            bigShadowLeft=-left*scale;
            bigShadowTop=-top*scale;
            bigImg.style.left=`${bigShadowLeft}px`;
            bigImg.style.top=`${bigShadowTop}px`;
        }
        box.onmouseleave = function () {
            shadow.style.display="none";
            bigShadow.style.display="none";
            document.onmousemove = null;
        }
    }
    function getStyle(ele,property){
        if(getComputedStyle){
            return getComputedStyle(ele)[property];
        }else{
            return ele.currentStyle[property];
        }
    }
</script>

实现功能:鼠标滑动可切换显示图片,鼠标移入显示图片会出现阴影块,同时右边出现放大的显示区.具体效果如下:
在这里插入图片描述

进撃的小胖

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js实现放大镜效果

购物网站放大镜效果js代码实现放大镜的实现关键点在于考虑放大比例与阴影部分的关系,即://小图:大图 = 遮罩 :大图显示区其中,小图部分指的是网页加载时看到的原比例图片,大图部分指的是通常被隐藏显示的img标签,遮罩部分即小图上提示放大的区域,大图显示区即相当于在大图上的相对位置,其比例与遮罩之于小图部分相同具体代码如下:html部分:<body> <di...
复制链接

扫一扫

专栏目录