案例：仿京东放大镜效果

最新推荐文章于 2022-07-05 20:32:57 发布

杨蛋蛋~R

最新推荐文章于 2022-07-05 20:32:57 发布

阅读量683

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_50119334/article/details/108934256

版权

本文通过一个案例详细介绍了如何使用JavaScript实现京东商品详情页的放大镜效果。功能包括：鼠标悬停显示遮挡层和大图，遮挡层随鼠标移动，以及大图根据遮挡层移动比例同步放大显示。核心逻辑为计算大图片的移动距离基于遮挡层的移动距离。

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

案例：仿京东放大镜效果

功能需求：

分为三个模块
鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏两个盒子功能
黄色的遮挡层跟随着鼠标移动
移动黄色遮挡层，大图片跟随着移动

大图片移动距离=（遮挡层移动距离*大图片最大移动距离）/ 遮挡层最大移动距离

  <style>
      body,
      div {
   
        margin: 0;
        padding: 0;
      }
      .product {
   
        position: relative;
        width: 400px;
        height: 400px;
        margin: 50px 0 0 20px;
        border: 1px solid #000;
      }
      .preview_img img {
   
        width: 300px;
        height: 300px;
        margin: 50px 50px;
      }
      .mask {
   
        position: absolute;
        display: none;
        top: 20px;
        left: 30px;
        width: 80px;
        height: 80px;
        background-color: yellow;
        opacity: 0.5;
        cursor: move;
      }
      .big {