【Javascript】入门之放大镜功能的实现

最新推荐文章于 2021-11-17 12:48:49 发布

夹心776655

最新推荐文章于 2021-11-17 12:48:49 发布

阅读量163

点赞数

分类专栏：代码实例 js交互设计文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_37086980/article/details/110756419

版权

代码实例同时被 2 个专栏收录

72 篇文章 3 订阅

订阅专栏

js交互设计

46 篇文章 0 订阅

订阅专栏

描述：当鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置, 使放大镜的移动方向与大图的水平和垂直方向相反

在这里插入图片描述

如何设计

页面元素
技术要点：事件捕捉和定位
难点：计算

涉及技术

onmouseover：当鼠标指针移动到指定的对象上时发生
onmouseout：鼠标指针移出指定对象时发生
onmousemove：鼠标指针移动时发生

offsetLeft | offsetTop | offsetWidth | offsetHeight
event.clientX | event.clientY

偏移量与style.left

style.left返回字符串，例如30px，而offsetLeft返回数字30。
style.left可以读和写，offsetLeft是只读的。如果我们想改变div的位置，我们可以修改style.left.
style.left应事先定义，否则值为空。

需要考虑

如何使小画面上的放大镜与大图同步移动
IE兼容性问题

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Magnifier Effect</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #wrap{
            width: 400px;
            height: 255px;
            margin: 50px;
            border: 1px solid #ccc;
            display: block;
            position: relative;
        }
        #small-box{
            position: relative;
            z-index: 1;
        }
        #float-box{
            width: 160px;
            height: 120px;
            position: absolute;
            background-color: #ffffcc;
            border:1px solid #ccc;
            filter: alpha(opacity = 50);
            opacity: .5;
            display: none;
        }
        #mask{
            position: absolute;
            display: block;
            width: 400px;
            height: 255px;
            z-index: 10;
            background-color: #ffffff;
            filter: alpha(opacity = 0);
            opacity: 0;
            cursor: move;
        }
        #big-box{
            position: absolute;
            top: 0;
            left: 460px;
            width: 400px;
            height: 300px;
            overflow: hidden;
            border: 1px solid #ccc;
            z-index: 1;
            display: none;
        }
        #big-box img{
            position: absolute;
            z-index: 5; 
        }
    </style>
</head>
<script>
    // 页面加载完毕之后执行
    window.onload = function(){
        // 获取父元素wrap, 小盒子,遮罩层, 放大镜, 大盒子, 大图片
        var wrap = document.getElementById('wrap');
        var smallBox = document.getElementById('small-box');
        var mask = document.getElementById('mask');
        var floatBox = document.getElementById('float-box');
        var bigBox = document.getElementById('big-box');
        var bigImg = bigBox.getElementsByTagName('img')[0];
        console.log(wrap, smallBox, mask, floatBox, bigBox, bigImg); 

        // 鼠标移动到小盒子上时, 放大镜显示, 大盒子显示
        mask.onmouseover = function(){
            floatBox.style.display = 'block';
            bigBox.style.display = 'block';
        }

        // 鼠标移出小盒子时, 放大镜隐藏, 大盒子隐藏
        mask.onmouseout = function(){
            floatBox.style.display = 'none';
            bigBox.style.display = 'none';
        }

        // 添加鼠标移动事件
        mask.onmousemove = function(ev){
            // 获取当前鼠标移动的位置并考虑IE兼容性
            var _event = ev || window.event;

            // 获取放大镜向左移动的距离
            var left = _event.clientX - wrap.offsetLeft - smallBox.offsetLeft - floatBox.offsetWidth / 2;
            var top = _event.clientY - wrap.offsetTop - smallBox.offsetTop - floatBox.offsetHeight / 2;

            // console.log(left, top);

            // 考虑边界情况
            if(left < 0){
                left = 0;
            }else if(left > (mask.offsetWidth - floatBox.offsetWidth)){
                left = mask.offsetWidth - floatBox.offsetWidth;
            }

            if(top < 0){
                top = 0;
            }else if(top > (mask.offsetHeight - floatBox.offsetHeight)){
                top = mask.offsetHeight - floatBox.offsetHeight;
            }

            floatBox.style.left = left + 'px';
            floatBox.style.top = top + 'px';

            // calculate percentage
            var percentX = left / (mask.offsetWidth - floatBox.offsetWidth);
            var percentY = top / (mask.offsetHeight - floatBox.offsetHeight);

            // calculate displacement of big image, big image has opposite direction of magnifying glass
            bigImg.style.left = -percentX * (bigImg.offsetWidth - bigBox.offsetWidth) + 'px';
            bigImg.style.top = -percentY * (bigImg.offsetHeight - bigBox.offsetHeight) + 'px';

        }
    }
</script>
<body>
    <div id="wrap">
        <div id="small-box">
            <div id="mask"></div>
            <div id="float-box"></div>
            <img src="./img/macbook-small.jpg" alt="smallMac">
        </div>
        <div id="big-box">
            <img src="./img/macbook-big.jpg" alt="bigMac">
        </div>
    </div>
</body>
</html>

夹心776655

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Javascript】入门之放大镜功能的实现

描述：当鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置, 使放大镜的移动方向与大图的水平和垂直方向相反如何设计页面元素技术要点：事件捕捉和定位难点：计算涉及技术onmouseover：当鼠标指针移动到指定的对象上时发生onmouseout：鼠标指针移出指定对象时发生onmousemove：鼠标指针移动时发生offsetLeft | offsetTop | offsetWidth | offsetHeightevent.clientX | event
复制链接

扫一扫

专栏目录