京东图片的放大移动案例

最新推荐文章于 2022-05-30 22:03:06 发布

cc&

最新推荐文章于 2022-05-30 22:03:06 发布

阅读量231

点赞数

分类专栏： js 文章标签： javascript html css

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: flex;
        }
        
        .left {
            position: relative;
            width: 400px;
            height: 400px;
            border: 1px solid grey;
        }
        
        .left img {
            width: 100%;
            height: 100%;
        }
        
        .left .yy {
            display: none;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 200px;
            height: 200px;
            background-color: greenyellow;
            opacity: .4;
        }
        
        .right {
            position: relative;
            display: none;
            width: 600px;
            height: 600px;
            margin-left: 200px;
            /* border: 1px solid grey; */
        }
        
        .right img {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 500px;
            height: 500px
        }
    </style>

    <body>
        <div class="container">
            <div class="left">
                <img src="img/b3.png" alt="">
                <div class="yy"></div>
            </div>
            <div class="right">
                <img src="img/big.jpg" alt="">
            </div>
        </div>
        <script>
            var left = document.querySelector('.left')
            var yy = left.children[1]
            var right = document.querySelector('.right')
            var bigimg = right.children[0]
            console.log(bigimg)
                // 1显示与隐藏
            left.addEventListener('mouseover', () => {
                yy.style.display = 'block'
                right.style.display = 'block'
            })
            left.addEventListener('mouseout', () => {
                    yy.style.display = 'none'
                    right.style.display = 'none'
                })
                // 2 阴影随着鼠标移动
            left.addEventListener('mousemove', (e) => {
                // console.log(e.pageX, e.pageY)
                // console.log(left.offsetLeft, left.offsetTop)
                var xyy = e.pageX - left.offsetLeft - yy.offsetWidth / 2
                var yyy = e.pageY - left.offsetTop - yy.offsetHeight / 2

                if (xyy < 0) {
                    xyy = 0
                } else if (xyy > left.offsetWidth - yy.offsetWidth) {
                    xyy = left.offsetWidth - yy.offsetWidth
                }
                if (yyy < 0) {
                    yyy = 0
                } else if (yyy > left.offsetHeight - yy.offsetHeight) {
                    yyy = left.offsetWidth - yy.offsetWidth
                }
                yy.style.left = xyy + 'px'
                yy.style.top = yyy + 'px'

                var yymax = left.offsetWidth - yy.offsetWidth
                var bigmax = right.offsetWidth - bigimg.offsetWidth
                console.log(yymax, bigmax)
                var bx = xyy * bigmax / yymax
                var by = yyy * bigmax / yymax
                console.log(bx, by)
                bigimg.style.left = -bx + 'px'
                bigimg.style.top = -by + 'px'

            })
        </script>

    </body>

</html>