[HTML/JS]用HTML、JS实现放大图片效果（放大镜）

最新推荐文章于 2024-07-12 21:49:18 发布

死呆鱼

最新推荐文章于 2024-07-12 21:49:18 发布

阅读量2.5k

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/GS119115/article/details/128656680

版权

购物软件普遍自带的商品放大镜可以让卖家浏览商品细节，当使用者的鼠标移动时，放大镜也随之移动，想要自己实现如下。

具体效果及代码如下：

京东

苏宁

代码如下：

样式部分

//display:none使“放大镜框”和放大图在卖家想查看之前隐藏

body {
        margin: 0;
    }

    .bigbox {
        /* background-color: rgb(233, 44, 44); */
        width: 1300px;
        height: 900px;
        position: relative;

    }

    .box1 {
        background-color: gray;
        width: 398px;
        height: 398px;
        position: absolute;
        left: 110px;
        top: 175px;
        border: solid 1px black;

    }

    .box2 {
        background-color: rgb(247, 211, 0.5, 0.5);
        width: 250px;
        height: 250px;
        position: absolute;
        left: 0px;
        top: 0px;
        display: none;
    }

    .box3 {
        background-color: red;
        width: 550px;
        height: 550px;
        position: absolute;
        left: 530px;
        top: 100px;
        overflow: hidden;
        border: solid 1px black;
        display: none;
    }

    .box3 img {
      position: absolute;
      left: 0;
      top: 0;
    }

主体部分

bigbox:这个区域的背景

box1:缩略图

box2:“放大镜的框”

box3:放大后的图

img1:小图

img2:大图

<div class="bigbox">

        <div class="box1">
            <img src="./images/1.png" class="img1">
            <div class="box2"></div>
        </div>
        <div class="box3">
            <img src="./images/2.jpg" class="img2">
        </div>

    </div>

JS部分

<script>
        var box1 = document.querySelector('.box1');
        var box2 = document.querySelector('.box2');
        var box3 = document.querySelector('.box3');
        var img2 = document.querySelector('.img2');

        box1.onmouseenter = function () {
            box2.style.display = 'block';
            box3.style.display = 'block';
        }

        box1.onmouseleave = function () {
            box2.style.display = 'none';
            box3.style.display = 'none';
        }

        box1.onmousemove = function () {
            var x = event.clientX - box1.offsetLeft;
            var y = event.clientY - box1.offsetTop;

            var box2X = x - box2.offsetWidth / 2
            var box2Y = y - box2.offsetHeight / 2

            if (box2X < 0) {
                box2X = 0;
            } else if (box2X > box1.offsetWidth - box2.offsetWidth) {
                box2X = box1.offsetWidth - box2.offsetWidth
            }
            if (box2Y < 0) {
                box2Y = 0;
            } 
            else if (box2Y > box1.offsetHeight - box2.offsetHeight) {
                box2Y = box1.offsetHeight - box2.offsetHeight
            }

            box2.style.left = box2X + 'px';
            box2.style.top = box2Y + 'px';

            var b = (img2.offsetHeight - box3.offsetHeight) / (box1.offsetHeight - box2.offsetHeight)

            img2.style.left = -box2X * b + "px"
            img2.style.top = -box2Y * b + "px"
        }


    </script>

//获取所需节点

var box1 = document.querySelector('.box1');

var box2 = document.querySelector('.box2');

var box3 = document.querySelector('.box3');

var img2 = document.querySelector('.img2');

//为右侧缩略图添加鼠标移入事件

box1.onmouseenter = function () {

//跟随鼠标在缩略图中移动的”放大镜框“，放大后的细节图

//二者在鼠标移入缩略图后显现

box2.style.display = 'block';

box3.style.display = 'block';

}