JavaScript实现放大镜效果

最新推荐文章于 2024-09-04 20:18:34 发布

_心之所向_

最新推荐文章于 2024-09-04 20:18:34 发布

阅读量1.2k

点赞数 6

分类专栏： JavaScript案例文章标签：前端案例放大镜 javascript

本文链接：https://blog.csdn.net/gl18792296581/article/details/100018863

版权

JavaScript案例专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaScript实现放大镜效果

在浏览一些购物网站时，我们经常会看到那种鼠标悬浮时，侧边出现放大的细节图的效果。下边是一个简单的图片放大镜效果实现过程。

效果展示

在这里插入图片描述

HTML部分

主要分为小图片、遮罩层和大图片；主要注意它们的位置关系。

<body>
    <div class="preview">
        <div class="preview_img">
            <!-- 小图片 -->
            <img src="6.jpg" alt="">
            <!-- 小图片上的遮罩层 -->
            <div class="mask"></div>    
    </div>
    <div class="big">
        <!-- 大图片 -->
            <img src="6.jpg" alt="" class="bigImg">
    </div>
</div>
</body>

CSS部分

因为遮罩层与大图片是当鼠标移入时显示的，所以一开始设置它们的display为none；并且它们都是位于其他元素上方的，为其添加绝对定位，设置index，让它们显示在最上方。

 *{
            margin: 0;
            padding: 0;
        }
    .preview_img {
        width: 500px;
        height: 300px;
        border: 1px solid #ccc;
        position: absolute;
        margin: 20px 20px;
    }
    .preview_img img {
     width: 100%; 
     height: 100%;  
    }
    .mask {
        display: none;/*初始隐藏*/
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
        background: #fede4f;
        opacity: .5;/*设置遮罩层半透明*/
        cursor: move;/*鼠标位于遮罩层时显示为移动图标*/
    }
    .big {
        display: none;/*初始隐藏*/
        position:absolute;
        width: 750px;
        height: 450px;
        background: pink;
        left: 540px;
        top: 20px;
        border: 1px solid #ccc;
        overflow: hidden;
    }
    .big img {
        position:absolute;
        left: 0;
        top: 0;
        width: 200%; 
        height: 200%;
    }

JavaScript部分

js部分分为三部分：
1、鼠标移入小盒子时显示；
2、鼠标移出小盒子时隐藏；
3、鼠标在小盒子内移动遮罩层和大图片产生相应的反应。

window.addEventListener("load",function(){
	//分别获取小图片盒子、遮罩层和大图片盒子
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    // 当鼠标经过小盒子时就显示遮罩层和大图片盒子
    preview_img.addEventListener('mousemove',function(){
        mask.style.display = "block";
        big.style.display = "block";
    });
    //当鼠标离开小盒子时就隐藏遮罩层和大图片盒子
    preview_img.addEventListener('mouseout',function(){
        mask.style.display = "none";
        big.style.display = "none";
    });
    // 鼠标移动的时候让mask跟着小盒子走
    preview_img.addEventListener('mousemove',function(e){
        // 计算出鼠标在盒子内的坐标
        // pageX，Y可以获取到鼠标在文档中的位置，
        // this.offsetLeft可以获取当前元素的偏移值
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // 使用鼠标在盒子内的坐标减去遮罩层的一半，就是遮罩层的最终位置
        var maskX = x - mask.offsetWidth/2;
        var maskY = y - mask.offsetHeight/2;
        //分别计算出遮罩层X轴与Y轴的最大移动距离
        var maskMaxX =preview_img.offsetWidth - mask.offsetWidth;
        var maskMaxY =preview_img.offsetHeight - mask.offsetHeight;
		//将遮罩层的移动距离限制在小图片盒子内
        if(maskX <= 0){
            maskX = 0;
        }else if(maskX >= maskMaxX){
            maskX = maskMaxX;
        }
        if(maskY <= 0){
            maskY = 0;
        }else if(maskY >= maskMaxY){
            maskY = maskMaxY;
        }
        //将遮罩层的移动距离给它的定位值，达到随鼠标移动的效果
        mask.style.left = maskX  + "px";
        mask.style.top = maskY + "px";


     	// 关键算法：大图片的移动距离= mask的移动距离 * 大图片的最大移动距离 / mask的最大移动距离
        //获取大图
        var bigImg = document.querySelector('.bigImg');
        // 大图片的最大移动距离
        var bigMaxX = bigImg.offsetWidth - big.offsetWidth;
        var bigMaxY = bigImg.offsetHeight - big.offsetHeight;
        // 大图片的移动距离
        var bigX = maskX * bigMaxX / maskMaxX;
        var bigY = maskY * bigMaxY / maskMaxY;
        //大图片一定是往反方向移动，所以设置负值
        bigImg.style.left = -bigX + "px";
        bigImg.style.top = -bigY + "px";
    });
});

此案例使用的是长方形盒子，仅供参考。

_心之所向_

关注

6
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
JavaScript实现放大镜效果

JavaScript实现放大镜效果效果展示HTML部分CSS部分JavaScript部分在浏览一些购物网站时，我们经常会看到那种鼠标悬浮时，侧边出现放大的细节图的效果。下边是一个简单的图片放大镜效果实现过程。效果展示HTML部分主要分为小图片、遮罩层和大图片；主要注意它们的位置关系。<body> <div class="preview"> ...
复制链接

扫一扫

专栏目录