js放大镜放大购物图片效果

更新时间：2021年08月26日 10:46:03 作者：秋天1014童话

这篇文章主要为大家详细介绍了基于JavaScript实现放大镜放大购物图片效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

图片放大镜效果，供大家参考，具体内容如下

一难点：不让黄盒子出界

二难点：让大盒子相应移动（比例）

<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>我的放大镜</title>
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  .box{
   margin: 100px;
   position: relative;
  }
  .small{
   width: 350px;
   height: 350px;
   border: 1px solid #999;
   position: relative;
  }
  .select{
   display: none;
   width: 100px;
   height: 100px;
   background: rgba(255,255,0,0.4);
   position: absolute;
   left: 0;
   top: 0;
   cursor: move;

  }
  .big{
   display: none;
   position: absolute;
   left: 360px;
   top: 0;
   width: 450px;
   height: 450px;
   border: 1px solid #ccc;
   overflow: hidden;
  }
  .big img{
   position: absolute;
   left: 0;
   top: 0;
  }
 </style> 
</head>
<body>
 <div class="box">
  <div class="small" id="smallbox">
   <img src="images/001.jpg" alt="">
   <div class="select" id="mask" style="display:none;"></div>
  </div>

  <div class="big" id="bigbox">
   <img src="images/0001.jpg" alt="">
  </div>
 </div>

 <script> 
  var smallbox = document.getElementById('smallbox');
  var bigbox = document.getElementById('bigbox');
  var mask = document.getElementById('mask');
  var bigImg = bigbox.children[0];
  smallbox.onmouseover = function(){
   mask.style.display = "block";
   bigbox.style.display = "block";
  }
  smallbox.onmouseout = function(){
   mask.style.display = "none";
   bigbox.style.display = "none";
  }

  smallbox.onmousemove = function(event){
   var event = event || window.event;

   var x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth/2;
   var y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight/2;
   //不让黄盒子出界
   if(x < 0){
    x = 0;
   }else if(x > smallbox.offsetWidth - mask.offsetWidth){
    x = smallbox.offsetWidth - mask.offsetWidth;
   }

   if(y<0) {
    y = 0;
   }else if(y > smallbox.offsetHeight - mask.offsetHeight){
     y = smallbox.offsetHeight - mask.offsetHeight;
   }
   mask.style.left = x + "px";
   mask.style.top = y + "px";

   bigImg.style.left = -x/smallbox.offsetWidth * bigbox.offsetWidth + "px"; //注意是-x
   bigImg.style.top = -y/smallbox.offsetHeight * bigbox.offsetHeight + "px";
  }
 </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js
放大镜

微信小程序实现获取自己所处位置的经纬度坐标功能示例
这篇文章主要介绍了微信小程序实现获取自己所处位置的经纬度坐标功能,涉及微信小程序地图功能获取经纬度信息的相关操作技巧,需要的朋友可以参考下
2017-11-11
JS Input里添加小图标的两种方法
大家在做网站的时候，经常需要在input里面添加小图标功能，看似功能很简单，但是实现起来还是有点技巧的，下面小编给大家介绍下JS Input里添加小图标的两种方法，需要的朋友参考下吧
2017-11-11
JS中使用sort结合localeCompare实现中文排序实例
这篇文章主要介绍了JS中使用sort结合localeCompare实现中文排序实例,重点介绍localeCompare函数,需要的朋友可以参考下
2014-07-07
javascript获取URL参数与参数值的示例代码
本篇文章主要是对javascript获取URL参数与参数值的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
js 内存释放问题
这里之所以使用setTimeout()，因为可以彻底回收当前所有对象，防止变量之间的引用导致释放失败，可以当作一个保障措施，按照道理来说，这里不会执行了。
2010-04-04
JS实现中英文混合文字溢出友好截取功能
这篇文章主要介绍了JS实现中英文混合文字溢出友好截取功能,通常会用到js的 substr 或者 substring方法, 以及字符串的length属性。需要的朋友可以参考下
2018-08-08
使用zrender.js绘制体温单效果
这篇文章主要介绍了使用zrender.js绘制体温单效果,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-10-10
详解JavaScript权威指南之对象
JavaScript对象除了可以保持自有的属性外，还可以从一个称为原型的对象继承属性。这篇文章主要介绍了详解JavaScript权威指南之对象的相关资料,需要的朋友可以参考下
2016-09-09
倾力总结40条常见的移动端Web页面问题解决方案
移动端Web需要照顾触摸操作的体验,以及更多的屏幕旋转与尺寸适配等问题,非常琐碎,在这里为大家倾力总结40条常见的移动端Web页面问题解决方案,欢迎收看收藏!
2016-05-05
如何在 JavaScript 中更好地利用数组
这篇文章主要介绍了如何在 JavaScript 中更好地使用数组，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-09-09