jquery实现放大镜效果

最新推荐文章于 2022-06-15 17:00:52 发布

万和IT教育

最新推荐文章于 2022-06-15 17:00:52 发布

阅读量1k

点赞数 3

分类专栏： java 深入浅出学java 文章标签： jQuery JavaScript css

本文链接：https://blog.csdn.net/qq_41717874/article/details/83542554

版权

本文介绍了如何使用jQuery实现商品展示中的放大镜效果。主要涉及CSS样式设置，如overflow:hidden和display:none，以及鼠标move和hover事件。通过设置HTML结构，CSS布局，以及JavaScript事件处理，当鼠标移到小图片上时，显示放大区域和相应的大图片部分，实现跟随鼠标移动的放大效果。

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

放大镜效果，被广泛的应用于商城的商品展示，其效果相比大家都不陌生。其原理也不是很难，那么今天就教大家如何实现放大镜效果！

主要的CSS样式：溢出隐藏overflow:hidden，隐藏图层display:none，定位position

用的主要事件：鼠标移动事件mousemove()和鼠标hover()

效果图：

这里需要找2长比例合适的图片，效果会更好

html部分：

这里需要使用2长一定比例的图片，在页面中按比例设置2个div中来存放这2长图片，并在小图片的div中按照一定的比例设一个用来放大的区域

<div class="img">
    <div class="simg"><!--小图片-->
        <img src="../作业/images/small.jpg"/>
        <div id="move"></div><!--放大区域-->
    </div>
    <div class="bimg"><!--大图片-->
        <img src="../作业/images/big.jpg" />
    </div>
&l