模仿京东放大镜的效果

最新推荐文章于 2022-09-12 14:37:06 发布

txq231254

最新推荐文章于 2022-09-12 14:37:06 发布

阅读量279

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/txq231254/article/details/124505751

版权

该博客主要介绍了如何利用CSS和JavaScript实现京东商品图片的放大镜效果。通过设置mouseover和mouseout事件，控制遮罩层和放大图片的显示与隐藏。在mousemove事件中，调整遮罩层和放大图片的位置，模拟放大镜跟随鼠标移动的效果。在实现过程中，作者提到了计算大图移动距离的公式可能存在的问题。

摘要由CSDN通过智能技术生成

主要练习元素偏移量 offset的系列

一、目标实现效果

二、实现过程及其思路展示

1、给鼠标设置一个'mouseover'事件在鼠标经过的时候可以将遮罩层和右边的放大图片显示设置为块级显示（页面加载时这两个为none也就是隐藏的状态），再给鼠标设置一个'mouseout',在鼠标超出图片所在范围的时候再将上面的两个属性的display设置为none，再次隐藏起来。

2、鼠标添加'mousemove'事件，再鼠标移动的时候给遮罩层赋予一个坐标跟随鼠标的移动而移动，而且需要在此时给右边的被放大的盒子添加位置（但是左右两边的位移是相反的，需要特别注意，只需要给鼠标产生位移的距离添加'-'号就行了）。

在原先需要放大的图片上准备一个有颜色的遮挡层背景的盒子，例如样式为

 .mask {
            display: none;
            width: 150px;
            height: 150px;
            background: rgba(228, 248, 138, 0.3);
            position: absolute;
            top: 0px;
            left: 0px;
            cursor: move;
        }

最低0.47元/天解锁文章