放大图片移动案例

最新推荐文章于 2023-02-22 17:09:48 发布

背着雨水上山

最新推荐文章于 2023-02-22 17:09:48 发布

阅读量281

点赞数

本文链接：https://blog.csdn.net/dhxb45678/article/details/125830310

版权

一、效果展示

二、案例分析

此案例可以分为以下几步实现：

1.当鼠标经过左侧小img时就显示黄色mask遮挡层和右侧大盒子，否则隐藏；

2.鼠标移动的时候，让黄色mask遮挡层的也跟着鼠标移动；

3.黄色mask移动，右侧的图片也随之移动

（这里右侧的放大效果，是通过放入一张比父盒子大的图，overflow：hidden 来实现的）

三、代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大图片移动案例</title>
    <style>
        *{
            margin: 0;
            padding-top: 0;
        }
        .preview-img{
            top: 50px;
            left: 50px;
            width: 300px;
            height: 300px;
            margin: 100px;
        }
        .imgS{
            position: absolute;
            width: 300px;
            height: 300px;
        }
        .mask{
            display: none;
            position: absolute;
            width: 200px;
            height: 200px;
            top: 100px;
            left: 100px;
            background-color:yellow;
            opacity: 0.5;
        }
        .big{
            display: none;
            position: absolute;
            left:410px;
            top: 100;
            width: 500px;
            height: 500px;
            background-color: violet;
            overflow: hidden;
        }
        .imgB{
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
    <div class="preview-img">
        <img src="../Js/images/7.11-1.jpg" alt="" class="imgS">
        <div class="mask"></div>
        <div class="big">
            <img src="../Js/images/7.11-1.jpg" alt="" class="imgB">
        </div>
    </div>

    <script>
        window.addEventListener('load',function(){
            var pre_img = document.querySelector('.preview-img');
            var mask = document.querySelector('.mask');
            var big = document.querySelector('.big');
            var img = document.querySelector('.imgB');
        //1. 当鼠标经过 pre_img 就显示和隐藏mask 遮挡层 和 big大盒子
            pre_img.addEventListener('mouseover',function(){
                mask.style.display = 'block';
                big.style.display = 'block';
            })
            pre_img.addEventListener('mouseout',function(){
                mask.style.display = 'none';
                big.style.display = 'none';
            })
        //2. 鼠标移动的时候，让黄色的盒子跟着鼠标走
            pre_img.addEventListener('mousemove',function(e){
                //鼠标在盒子中的坐标
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;
                //改变黄色盒子的left 和 top  让鼠标在mask的中间，所以要减去它本身的一半
                //因为要进行限制，所以要进行比较，但有px无法比较，所以先给它一个定义
               var maskX = x -mask. offsetWidth /2  + 100 ;
               var maskY = y -mask.offsetHeight /2  + 100 ;
                if(maskX < 100){
                    maskX = 100 ;
                }
                else if(maskX > pre_img.offsetWidth - mask.offsetWidth +100){
                    maskX = pre_img.offsetWidth - mask.offsetWidth +100;
                }
                if(maskY < 100){
                    maskY = 100 ;
                }
                else if(maskY > pre_img.offsetHeight - mask.offsetHeight +100){
                    maskY = pre_img.offsetHeight - mask.offsetHeight +100;
                }
                mask.style.left = maskX +'px'; 
                mask.style.top = maskY +'px';

                //大图片的移动距离 = 遮挡层移动距离 *大图片最大移动距离 /遮挡层最大移动距离
                var maskMax = pre_img.offsetHeight - mask.offsetHeight;//最大移动距离
                var imgMax = img.offsetWidth - big.offsetWidth;
                img.style.left = -(maskX -100) * imgMax /maskMax + 'px';
                img.style.top = -(maskY -100) * imgMax /maskMax + 'px';
            })
        })
    </script>
</body>
</html>

代码注释：

1.此案例综合使用了 html、css、js来实现，主要练习的知识点是

event.pageX	返回鼠标指针的位置，相对于文档的左边缘
event.pageY	返回鼠标指针的位置，相对于文档的上边缘
offsetWidth	返回该元素的像素宽度（包括内边距、边框），是一个整数，单位是像素 px。只读属性。
offsetHeight	返回该元素的像素高度（包括内边距、边框）,是一个整数，单位是像素 px。只读属性。
offsetLeft	元素相对于 offsetParent 节点左边界的偏移像素值（包括内外边距、边框、滚动条），返回一个整数，表示该元素的左侧偏移量，单位是像素 px。只读属性。
offsetTop	返回当前元素相对于 offsetParent 节点顶部边界的偏移像素值（包括内外边距、边框、滚动条），返回一个整数，表示该元素的顶部侧偏移量，单位是像素 px。只读属性。

（ offsetParent 元素是一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的元素。）

2.控制盒子的隐藏与出现

mouseover 时：mask.style.display = 'block';

mouseout 时：mask.style.display = 'none';

3.黄色mask只能在它的父盒子范围内移动，所以要判断它的 left 和 top 值的大小

maskX = x -mask. offsetWidth /2 + 100 ; 这里 maskX 是 mask 对于页面左部的距离，‘-mask.offsetWidth/2’c的原因是，让鼠标在mask中间，要减去 mask 自身的宽度的一半，这里自己画一画，比较一下就能清楚。