#商城放大镜------------进阶篇

最新推荐文章于 2026-08-21 17:54:30 发布

原创最新推荐文章于 2026-08-21 17:54:30 发布 · 270 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

本文详细介绍了如何使用HTML、CSS和JavaScript实现一个带有黄色查看框的商城产品图片放大镜功能，包括不同尺寸图片的切换、鼠标悬停显示放大区域及背景图片定位调整。

#商城放大镜------------进阶篇

效果基本如下：

在这里插入图片描述

首先需要有几种大小分别为小，中，大的图片，基本思路还是跟上一篇差不多，主要多了一个黄色的查看框。

css：

<style>
        #left {
            width: 300px;
            height: 400px;
            margin: 150px;
            border: 1px solid #ccc;
            position: relative;
        }

        #img {
            height: 300px;
        }

        #list {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            height: 100px;
        }

        #list img {
            border: 1px solid transparent
        }

        #list img.active {
            border: 1px solid #ccc;
        }

        #right {
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            background: green;
            position: absolute;
            top: 0;
            display: none;
            left: 300px;
        }

        .shadow {
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            width: 150px;
            height: 150px;
            background: rgba(255, 217, 0, 0.24);
            cursor: move;
        }
    </style>

body:

<div id="left">
        <div id="img" style="background: url(./img/1.jpg) 0 / 100% 100%;">
            <div class="shadow"></div>
        </div>
        <div id="list">

        </div>
    </div>
    <div id="right" style="background: url(./img/2.jpg) center;"></div>

顺带回顾一下ajax请求，所以有json文件。

json：

[
    {
        "id": 1,
        "imgs": [
            "0.jpg",
            "1.jpg",
            "2.jpg"
        ]
    },
    {
        "id": 2,
        "imgs": [
            "3.jpg",
            "7.jpg",
            "9.jpg"
        ]
    },
    {
        "id": 3,
        "imgs": [
            "8.jpg",
            "6.jpg",
            "5.jpg"
        ]
    }
]

script:

<script>
        function $(str) {
            return document.querySelector(str)
        }

        window.onload = function () {

            let ajax = new XMLHttpRequest()
            ajax.open('GET', './data.json', true)
            ajax.send()
            ajax.onreadystatechange = () => {
                if (ajax.readyState === 4) {
                    if (ajax.status === 200) {
                        let arr = JSON.parse(ajax.response)
                        arr.forEach((r, i) => {
                            let img = document.createElement('img')
                            img.src = './img/' + r.imgs[0]
                            if (i === 0) img.classList.add('active')
                            img.onmouseenter = function () {
                                let imgs = $('#list').children
                                for (let i = 0; i < imgs.length; i++) {
                                    imgs[i].classList.remove('active')
                                }

                                this.classList.add('active')
                                $('#img').style['background-image'] = `url(./img/${arr[i].imgs[1]})`
                                $('#right').style['background-image'] = `url(./img/${arr[i].imgs[2]})`

                            }
                            $('#list').appendChild(img)
                        })

                        let l = $("#left").offsetLeft + $('#left').offsetWidth
                        let t = $("#left").offsetTop

                        $("#right").style.left = l + 'px'
                        $("#right").style.top = t + 'px'

                        $("#img").onmouseenter = () => {
                            $('.shadow').style.display = 'block'
                            $('#right').style.display = 'block'
                        }

                        $("#img").onmouseleave = () => {
                            $('#right').style.display = 'none'
                            $('.shadow').style.display = 'none'
                        }

                        $("#img").onmousemove = (e) => {
                            let x = e.pageX - $('#left').offsetLeft
                            let y = e.pageY - $("#left").offsetTop

                            x = x / $('#left').offsetWidth
                            y = y / $('#left').offsetHeight

                            x = (x * 100).toFixed(4) + "%"
                            y = (y * 100).toFixed(4) + "%"


                            $("#right").style['background-position-x'] = x
                            $("#right").style['background-position-y'] = y

                            let xx = e.pageX - $('#left').offsetLeft - ($('.shadow').offsetWidth / 2)
                            let yy = e.pageY - $('#left').offsetTop - ($('.shadow').offsetHeight / 2)

                            if (xx < 0) xx = 0
                            if (yy < 0) yy = 0
                            let maxLeft = $('#left').offsetWidth - $('.shadow').offsetWidth
                            let maxTop = $('#img').offsetHeight - $('.shadow').offsetHeight
                            if (xx > maxLeft) xx = maxLeft
                            if (yy > maxTop) yy = maxTop

                            $('.shadow').style.left = xx + "px"
                            $('.shadow').style.top = yy + "px"
                        }


                    }
                }
            }
        }

    </script>

xx + “px”
$(’.shadow’).style.top = yy + “px”
}

                }
            }
        }
    }

</script>


这样一个比较完善的放大镜功能就实现啦！！！！

标签

#javascript