放大镜 js

最新推荐文章于 2022-03-15 14:20:02 发布

l-Isabel

最新推荐文章于 2022-03-15 14:20:02 发布

阅读量90

点赞数

分类专栏：案例文章标签： js

本文链接：https://blog.csdn.net/Isabeldeng/article/details/109825389

版权

案例专栏收录该内容

12 篇文章 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>
        * {
            padding: 0;
            margin: 0;
        }

        .bigbox {
            float: left;
            border: 1px solid gray;
            width: 300px;
            height: 300px;
            margin-left: 20px;
            overflow: hidden;
            position: absolute;
            left: 400px;
            top: 0;

        }

        span {
            display: inline-block;
            height: 100px;
            width: 100px;
            position: absolute;
            left: 0;
            top: 0;
            background-color: gray;
            opacity: 0.3;

        }

        .small_box {
            float: left;
            position: relative;
            margin-left: 100px;
            cursor: move;
        }

        img {
            display: block;
        }

        .bigbox img {
            position: absolute;
            left: 0;
            top: 0;

        }
    </style>
</head>

<body style="position: relative;">
    <div class="wrap" style="position: relative;">
        <div class="small_box">
            <img src="./素材/images/smallpic.jpg" alt="">
            <span></span>
        </div>
    </div>

    <div class="bigbox">
        <img src="./素材/images/bigpic.jpg" alt="">
    </div>

    <script>
        var mark = document.querySelector('span')
        var small_box = document.querySelector('.small_box')
        var bigbox = document.querySelector('.bigbox')
        var bigImg = document.querySelector('.bigbox img')
        small_box.onmousemove = function (e) {
            //e.clientX相对于浏览器,
            myleft = e.clientX - small_box.offsetLeft - mark.offsetWidth / 2
            mytop = e.clientY - small_box.offsetTop - mark.offsetHeight / 2
            if (myleft < 0) { myleft = 0; }
            if (mytop < 0) { mytop = 0; }
            if (myleft > small_box.clientWidth - mark.clientWidth) {
                myleft = small_box.clientWidth - mark.clientWidth
            }
            if (mytop > small_box.clientHeight - mark.clientHeight) {
                mytop = small_box.clientHeight - mark.clientHeight
            }
            mark.style.left = myleft + 'px'//相对于small_box
            mark.style.top = mytop + 'px'
            bigImg.style.left = -myleft * (bigImg.clientWidth / small_box.clientWidth) + 'px'
            bigImg.style.top = -mytop * (bigImg.clientHeight / small_box.clientHeight) + 'px'
            //图片位置
        }
    </script>
</body>

</html>

l-Isabel

关注

0
点赞
踩
0

收藏

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

<!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> * { p
复制链接

扫一扫