速卖通产品图片放大镜功能实现方法详解，附完整代码

最新推荐文章于 2021-06-17 07:11:41 发布

Shopify 专家

最新推荐文章于 2021-06-17 07:11:41 发布

阅读量812

点赞数 1

分类专栏： JavaScript 文章标签： css jquery html

本文链接：https://blog.csdn.net/BaymaxCSDN/article/details/105158472

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

速卖通产品图片放大镜功能

速卖通图片放大镜效果实现方法详解，附完整代码

效果图如下

速卖通产品图片放大镜效果

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/jquery.image-viewer.css">
	<style>
    #img_wrap,#img_wrap_view {
      width: 616px;
      height: 410px;
      overflow: hidden;
      position: relative;
      margin: 0 auto;
      cursor: pointer;
    }
    #img_wrap .img,#img_wrap_view .img {
      position: absolute;
      top: 0;
      left: 0;
      width:100%;
      height: 100%;
    }
	</style>
</head>
<body>

<div id="img_wrap">
  <img class="img" src="./images/logo_bg.jpg">
</div>
<div id="img_wrap_view">
  <img class="img" src="./images/logo_bg.jpg">
</div>
</body>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>\
<script>
let multiple = 2; // 放大倍数
  $("#img_wrap").mousemove(function(e){
    // 获取容器高宽
    let w = e.currentTarget.offsetWidth;
    let h = e.currentTarget.offsetHeight;
    // 获取鼠标在元素内的位置
    let x = e.pageX-$(this).offset().left;
    let y = e.pageY-$(this).offset().top;
    // 获取偏移百分比
    let xp = x/w;
    let yp = y/h;
    // 获取大图可以偏移的长度
    let Xl = multiple*w - w;
    let Yl = multiple*h - h;
    // 计算 大图要偏移的值
    let X =0-Xl*xp;
    let Y =0-Yl*yp;
    // 获取
    console.log( $(this).offset())
    $(this).find(".img").css({
      "width": multiple*w+"px",
      "height": multiple*h+"px",
      "top": Y+"px",
      "left": X+"px"
    })
  })
  $("#img_wrap").mouseleave(function(e){
    $(this).find(".img").css({
      "width": "100%",
      "height": "100%",
      "top": 0+"px",
      "left": 0+"px"
    })
  })
</script>
</html>

Shopify 专家

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
速卖通产品图片放大镜功能实现方法详解，附完整代码

速卖通产品图片放大镜功能速卖通图片放大镜效果实现方法详解，附完整代码效果图如下代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="...
复制链接

扫一扫