JavaScript练手——仿京东商品导览放大镜

最新推荐文章于 2023-10-13 20:22:22 发布

Et2nity

最新推荐文章于 2023-10-13 20:22:22 发布

阅读量251

点赞数 2

分类专栏： JS/JavaScript 文章标签： js html javascript css 前端

本文链接：https://blog.csdn.net/Eternity_matt/article/details/108711546

版权

JS/JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

一 . 实际效果图

二 . 贴源代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #left {
            width: 300px;
            height: 300px;
            border: 1px solid #333;

            position: relative;
        }

        #left img {
            width: 300px;
            height: 300px;

        }

        #right {
            width: 500px;
            height: 500px;
            position: absolute;
            /* border: 1px solid red; */
            background: url('https://img14.360buyimg.com/n0/jfs/t1/52252/35/10516/124064/5d7808e0E46202391/7100f3733a1c1f00.jpg'), center;
            background-repeat: no-repeat;
            display: none;
            overflow: hidden;
            background-size: 300%;
        }

        .shadow {
            width: 140px;
            height: 140px;
            background: 50% top no-repeat #fede4f;
            opacity: .5;
            position: absolute;
            cursor: move;
            /* display: none; */
        }

        .side {
            margin: 200px;
            width: 310px;
            /* border: 1px solid red; */
            box-sizing: border-box;
            box-shadow: 0 0 2px #333;
        }

        .indexes {
            display: flex;
            justify-content: space-between;
            padding: 5px;
            
        }

        .indexes li {
            width: 59px;
            height: 60px;
        }

        .indexes li img{
            width: 56px;
            height: 60px;
        }

        .indexes li.active {
           border: 2px solid red;
        }
    </style>
</head>

<body>
    <div class="side">
        <div id="left">
            <div class="shadow"></div>
            <img src="https://img14.360buyimg.com/n0/jfs/t1/52252/35/10516/124064/5d7808e0E46202391/7100f3733a1c1f00.jpg"
                alt="" id='img'>


        </div>
        <ul class="indexes">
            <li class="active">
                <img src="https://img10.360buyimg.com/n5/s54x54_jfs/t1/52252/35/10516/124064/5d7808e0E46202391/7100f3733a1c1f00.jpg"
                    alt="">
            </li>
            <li>
                <img src="https://img10.360buyimg.com/n5/s54x54_jfs/t1/55262/10/10389/160630/5d7808eeEdfd6dfcf/61b23601bfa7caf8.jpg"
                    alt="">
            </li>
            <li>
                <img src="https://img10.360buyimg.com/n5/s54x54_jfs/t1/79220/34/9855/85179/5d7808e4Ed698c715/54461de6fb779e6f.jpg"
                    alt="">
            </li>
            <li>
                <img src="https://img10.360buyimg.com/n5/s54x54_jfs/t1/62433/35/10050/164441/5d7808f1E1a91c53c/689ad7454bf048aa.jpg"
                    alt="">
            </li>
            <li>
                <img src="https://img10.360buyimg.com/n5/s54x54_jfs/t1/49746/15/10372/64202/5d7808f6E22e1eb0a/37809bac4bda8996.jpg"
                    alt="">
            </li>
        </ul>

        <div id="right"> </div>

        <script>
            let shadow = document.querySelector('.shadow')

            let left = document.querySelector('#left')
            let right = document.querySelector('#right')

            right.style.top = left.offsetTop + 'px'
            right.style.left = left.offsetLeft + left.offsetWidth + 10 + 'px'

            let imgs = [
                {
                    small: 'https://img10.360buyimg.com/n5/s54x54_jfs/t1/52252/35/10516/124064/5d7808e0E46202391/7100f3733a1c1f00.jpg',
                    middle: 'https://img14.360buyimg.com/n0/jfs/t1/52252/35/10516/124064/5d7808e0E46202391/7100f3733a1c1f00.jpg',
                    large: 'https://img14.360buyimg.com/n0/jfs/t1/52252/35/10516/124064/5d7808e0E46202391/7100f3733a1c1f00.jpg'
                },
                {
                    small: 'https://img10.360buyimg.com/n5/s54x54_jfs/t1/55262/10/10389/160630/5d7808eeEdfd6dfcf/61b23601bfa7caf8.jpg',
                    middle: 'http://img10.360buyimg.com/n1/s450x450_jfs/t1/55262/10/10389/160630/5d7808eeEdfd6dfcf/61b23601bfa7caf8.jpg',
                    large: 'http://img10.360buyimg.com//n0/jfs/t1/55262/10/10389/160630/5d7808eeEdfd6dfcf/61b23601bfa7caf8.jpg'
                },
                {
                    small: 'https://img10.360buyimg.com/n5/s54x54_jfs/t1/79220/34/9855/85179/5d7808e4Ed698c715/54461de6fb779e6f.jpg',
                    middle: 'http://img10.360buyimg.com/n1/s450x450_jfs/t1/79220/34/9855/85179/5d7808e4Ed698c715/54461de6fb779e6f.jpg',
                    large: 'http://img10.360buyimg.com//n0/jfs/t1/79220/34/9855/85179/5d7808e4Ed698c715/54461de6fb779e6f.jpg'
                },

                {
                    small: 'https://img10.360buyimg.com/n5/s54x54_jfs/t1/62433/35/10050/164441/5d7808f1E1a91c53c/689ad7454bf048aa.jpg',
                    middle: 'http://img10.360buyimg.com/n1/s450x450_jfs/t1/62433/35/10050/164441/5d7808f1E1a91c53c/689ad7454bf048aa.jpg',
                    large: 'http://img10.360buyimg.com//n0/jfs/t1/62433/35/10050/164441/5d7808f1E1a91c53c/689ad7454bf048aa.jpg'
                },

                {
                    small: 'https://img10.360buyimg.com/n5/s54x54_jfs/t1/49746/15/10372/64202/5d7808f6E22e1eb0a/37809bac4bda8996.jpg',
                    middle: 'https://img10.360buyimg.com/n1/s450x450_jfs/t1/49746/15/10372/64202/5d7808f6E22e1eb0a/37809bac4bda8996.jpg',
                    large: 'https://img10.360buyimg.com//n0/jfs/t1/49746/15/10372/64202/5d7808f6E22e1eb0a/37809bac4bda8996.jpg',
                }
            ]

            let indexes = document.querySelectorAll('.indexes li')
            let img = document.querySelector('#img')

            for (let i = 0; i < indexes.length; i++) {
                indexes[i].onmouseenter = function () {
                    img.src = imgs[i].middle
                    //换大图
                    right.style.backgroundImage = `url(${imgs[i].large})`
                    //自身高亮
                    document.querySelector('.indexes li.active').classList.remove('active')
                    indexes[i].classList.add('active')
                }

            }


            left.onmousemove = function (e) {
                let offsetX = e.pageX - left.offsetLeft
                let offsetY = e.pageY - left.offsetTop

                let percent_x = (offsetX / left.offsetWidth) * 100 + '%'
                let percent_y = (offsetY / left.offsetHeight) * 100 + '%'

                right.style.backgroundPosition = `${percent_x } ${percent_y }`


                // shadow 限制范围   控制
                let x = offsetX - shadow.offsetWidth / 2
                let y = offsetY - shadow.offsetHeight / 2
                if (x < 0) x = 0
                if (y < 0) y = 0
                let maxLeft = left.offsetWidth - shadow.offsetWidth
                let maxTop = left.offsetHeight - shadow.offsetHeight
                if (x > maxLeft) x = maxLeft
                if (y > maxTop) y = maxTop
                //定位shadow
                shadow.style.left = x + 'px'
                shadow.style.top = y + 'px'
            }
        



            left.onmouseenter = function () {
                right.style.display = 'block'
                shadow.style.display = 'block'
            }
            left.onmouseleave = function () {
                right.style.display = 'none'
                shadow.style.display = 'none'
            }
        </script>
</body>

</html>

Et2nity

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
JavaScript练手——仿京东商品导览放大镜

一 . 实际效果图放大镜二 . 贴源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &lt...
复制链接

扫一扫

专栏目录