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

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

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

效果图：（实例图片由自己添加）

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

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>仿淘宝放大镜特效</title>
 <style type="text/css">
 *{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;}
 </style>
</head>
<body>
 <div id="demo">
 <div id="smil_box">
 <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=193662baf63738c68b594f3ec920769f" height="350" width="350" alt="">
 <div id="mask"></div>
 </div>
 <div id="big_box">
 <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=3e8b3554eb90dd13fa0f82465ac6d382" height="800" width="800" alt="" id="big_img">
 </div>
 </div>
</body>
<script type="text/javascript">
 (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)
</script>
</html>

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

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

分享题目：js怎么模拟实现淘宝网商品放大镜效果-创新互联
文章分享：https://www.cdcxhl.com/article16/jgcgg.html

成都网站建设公司_创新互联，为您提供做网站、网站营销、面包屑导航、软件开发、网站建设、定制网站

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

猜你还喜欢下面的内容