js放大镜放大购物图片效果-创新互联

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

创新互联公司专注于企业网络营销推广、网站重做改版、甘南网站定制设计、自适应品牌网站建设、H5响应式网站、商城网站制作、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为甘南等各大城市提供网站开发制作服务。

一难点：不让黄盒子出界

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

<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" ></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>

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文标题：js放大镜放大购物图片效果-创新互联
文章分享：https://www.cdcxhl.com/article22/ccsdjc.html

成都网站建设公司_创新互联，为您提供面包屑导航、软件开发、服务器托管、自适应网站、网页设计公司、定制网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

商城网站建设

外贸网站建设知识

分类信息网