• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

JavaScript仿京东放大镜特效

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了JavaScript仿京东放大镜的具体代码,供大家参考,具体内容如下

功能需求:

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

大图片移动距离=(遮挡层移动距离*大图片最大移动距离)/ 遮挡层最大移动距离

<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 {
        position: absolute;
        display: none;
        left: 410px;
        top: 0;
        width: 500px;
        height: 500px;
        z-index: 999;
        overflow: hidden;
      }
      .big img {
        position: absolute;
        top: 0;
        left: 0;
        width: 400px;
        height: 400px;
      }
    </style>
    <!-- 引入js文件 -->
    <script src="detail.js"></script>
  </head>
  <body>
    <div class="product">
      <div class="preview_img">
        <img src="images/xs.jpg" alt="" />
        <div class="mask"></div>
        <div class="big">
          <img src="images/xs.jpg" alt="" class="bigImg" />
        </div>
      </div>
    </div>
</body>

JS页面

//页面预加载
window.addEventListener("load", function () {
  var preview_img = document.querySelector(".preview_img");
  var mask = document.querySelector(".mask");
  var big = document.querySelector(".big");

  //1.鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子
  preview_img.addEventListener("mouseover", function () {
    mask.style.display = "block";
    big.style.display = "block";
  });
  preview_img.addEventListener("mouseout", function () {
    mask.style.display = "none";
    big.style.display = "none";
  });
  //把鼠标坐标给遮挡层是不合适的,因为遮挡层坐标以父盒子为准
  preview_img.addEventListener("mousemove", function (e) {
    //(1)先计算出鼠标在盒子内的坐标
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    //(2)减去盒子高度宽度的一半
    //(3)mask 移动的距离
    var maskX = x - mask.offsetWidth / 2;
    var maskY = y - mask.offsetHeight / 2;
    //(4)如果坐标小于0 就让他停在 0 的位置(即超出盒子范围就停止)
    var egdeX = preview_img.offsetWidth - mask.offsetWidth;
    var egdeY = preview_img.offsetHeight - mask.offsetHeight;
    if (maskX <= 0) {
      maskX = 0;
    } else if (maskX >= egdeX) {
      maskX = egdeX;
    }
    if (maskY <= 0) {
      maskY = 0;
    } else if (maskY >= egdeY) {
      maskY = egdeY;
    }
    mask.style.left = maskX + "px";
    mask.style.top = maskY + "px";
    //大图片的移动距离 = 遮挡层移动距离*大图片最大移动距离 / 遮挡层的最大移动距离
    var bigImg = document.querySelector(".bigImg");
    //大图片最大移动距离
    var bigMax = bigImg.offsetWidth - big.offsetWidth;
    //大图片的移动距离 x y
    var bigX = (maskX * bigMax) / egdeX;
    var bigY = (maskY * bigMax) / egdeY;
    bigImg.style.left = -bigX + "px";
    bigImg.style.top = -bigY + "px";
  });
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
vue实现全选功能发布时间:2022-02-05
下一篇:
vue实现页面缓存功能发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap