资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

js怎么模拟实现淘宝网商品放大镜效果-创新互联

小编给大家分享一下js怎么模拟实现淘宝网商品放大镜效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联建站是一家专注于成都做网站、网站建设、外贸营销网站建设与策划设计,民和网站建设哪家好?创新互联建站做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:民和等地区。民和做网站价格咨询:028-86922220

效果图:(实例图片由自己添加)

js怎么模拟实现淘宝网商品放大镜效果

代码如下:




 
 仿淘宝放大镜特效
 
 *{margin: 0;padding: 0;}
 #demo{width:350px;height:350px;border: 1px solid #000;position:relative;margin:100px;}
 #smil_box{width: 350px;height: 350px;position:relative;}
 #mask{width:175px;height: 175px;background:rgba(255,255,0,0.4);position:absolute;top:0;left:0;display:none;cursor:move;}
 #big_box{width: 400px;height: 400px;position:absolute;top:0;left:360px;border: 1px solid #000;overflow:hidden;display:none;}
 #big_box img{position:absolute;top:0;left:0;}
 


 
 
 
 
 
     
   (function(window){  function $(id){  return document.getElementById(id);  };  // 获取对象  var demo = $("demo"),smilBox = $("smil_box"),mask = $("mask"),bigImg = $("big_img"),bigBox = $("big_box");  // smilBox的hover事件  smilBox.onmouseover = function(){  mask.style.display = "block";  bigBox.style.display = "block";  };  smilBox.onmouseout = function(){  mask.style.display = "none";  bigBox.style.display = "none";  };  // 鼠标移动事件  smilBox.onmousemove = function(event){  var event = event || window.event;  // 获取鼠标在页面上的坐标  var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;  var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;  // mask的位置坐标  var boxX = pageX - demo.offsetLeft;  var boxY = pageY - demo.offsetTop;  var maskX = boxX - mask.offsetWidth / 2;  var maskY = boxY - mask.offsetHeight / 2;  // 限制mask的移动范围  if( maskX < 0 ){  maskX = 0;  };  if( maskX > smilBox.offsetWidth - mask.offsetWidth){  maskX = smilBox.offsetWidth - mask.offsetWidth;  };  if( maskY < 0 ){  maskY = 0;  };  if( maskY > smilBox.offsetHeight - mask.offsetHeight){  maskY = smilBox.offsetHeight - mask.offsetHeight;  };  // 黄色遮罩层的位置坐标  mask.style.top = maskY + "px";  mask.style.left = maskX + "px";  // 大图片移动的比例  var prop = ( bigImg.offsetWidth - bigBox.offsetWidth ) / (smilBox.offsetWidth - mask.offsetWidth);  // 大图片的坐标  var bigImgX = prop * maskX;  var bigImgY = prop * maskY;  bigImg.style.top = -bigImgY + "px";  bigImg.style.left = -bigImgX + "px";  }  })(window)

以上是“js怎么模拟实现淘宝网商品放大镜效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站建设公司行业资讯频道!

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


文章名称:js怎么模拟实现淘宝网商品放大镜效果-创新互联
标题来源:http://cdkjz.cn/article/jgcgg.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:400-028-6601 / 大客户专线   成都:13518219792   座机:028-86922220