放大镜效果（节点操作，鼠标事件，event事件对象，offset）

最新推荐文章于 2023-10-18 09:20:52 发布

zh__quan

最新推荐文章于 2023-10-18 09:20:52 发布

阅读量367

点赞数

分类专栏： webapi

本文链接：https://blog.csdn.net/zh__quan/article/details/97645552

版权

webapi 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: none
        }
        
        img {
            vertical-align: top;
        }
        
        #box {
            width: 350px;
            height: 350px;
            background-color: red;
            margin: 100px 0 0 100px;
            position: relative;
        }
        
        #small_box {
            width: 100%;
            height: 100%;
            border: 1px solid #ccc;
            position: relative;
        }
        
        #small_box img {
            width: 350px;
            height: 350px;
        }
        
        #mask {
            width: 100px;
            height: 100px;
            background-color: rgba(255, 255, 0, .4);
            position: absolute;
            left: 0;
            top: 0;
            cursor: move;
            display: none;
        }
        
        #big_box {
            width: 600px;
            height: 600px;
            border: 1px solid #ccc;
            overflow: hidden;
            position: absolute;
            left: 360px;
            top: 0;
            display: none;
        }
        
        #list {
            margin: 20px 0 0 100px;
        }
        
        #list img {
            margin: 3px;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="small_box">
            <img src="images/pic001.jpg" alt="">
            <span id="mask"></span>
        </div>
        <div id="big_box">
            <img src="images/pic01.jpg" alt="" style="position: absolute; left:0; top:0;">
        </div>
    </div>
    <div id="list">
        <img src="images/pic0001.jpg" alt="">
        <img src="images/pic0002.jpg" alt="">
        <img src="images/pic0003.jpg" alt="">
    </div>
    <script>
        window.onload = function() {
            // 1. 获取需要的标签
            var box = document.getElementById("box");
            var small_box = box.children[0];
            var big_box = box.children[1];
            var mask = small_box.children[1];
            var big_img = big_box.children[0];
            var list_img = document.getElementById("list").children;

            // 2. 监听鼠标进入小盒子
            small_box.onmouseover = function() {
                // 2.1 把隐藏的内容显示
                mask.style.display = 'block';
                big_box.style.display = 'block';

                // 2.2 监听鼠标的移动
                small_box.onmousemove = function(event) {
                    var event = event || window.event;

                    // 2.3 求出鼠标的坐标
                    var pointX = event.clientX - small_box.offsetParent.offsetLeft - mask.offsetWidth * 0.5;
                    var pointY = event.clientY - small_box.offsetParent.offsetTop - mask.offsetHeight * 0.5;

                    // 2.4 边界检测
                    if (pointX < 0) {
                        pointX = 0;
                    } else if (pointX >= small_box.offsetWidth - mask.offsetWidth) {
                        pointX = small_box.offsetWidth - mask.offsetWidth;
                    }

                    if (pointY < 0) {
                        pointY = 0;
                    } else if (pointY >= small_box.offsetHeight - mask.offsetHeight) {
                        pointY = small_box.offsetHeight - mask.offsetHeight;
                    }

                    // 2.5 让放大镜移动起来
                    mask.style.left = pointX + 'px';
                    mask.style.top = pointY + 'px';

                    // 2.6 让大图移动起来
                    /*
                       smallX / bigX = smallBox.width / 大图的宽度
                       bigX = smallX / ( smallBox.width / 大图的宽度 )
                    */
                    big_img.style.left = -pointX / (small_box.offsetWidth / big_box.offsetWidth) + 'px';
                    big_img.style.top = -pointY / (small_box.offsetHeight / big_box.offsetHeight) + 'px';
                }
            };

            // 3. 监听鼠标离开小盒子
            small_box.onmouseout = function() {
                // 2.1 把隐藏的内容显示
                mask.style.display = 'none';
                big_box.style.display = 'none';
            };

            // 4. 遍历列表图片
            for (var i = 0; i < list_img.length; i++) {
                (function(i) {
                    var img = list_img[i];
                    img.onmouseover = function() {
                        small_box.children[0].src = "images/pic00" + (i + 1) + ".jpg";
                        big_img.src = "images/pic0" + (i + 1) + ".jpg"
                    }
                })(i);
            }
        }
    </script>
</body>

</html>

zh__quan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
放大镜效果（节点操作，鼠标事件，event事件对象，offset）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padd...
复制链接

扫一扫