首页 > 代码库 > 仿京东放大镜
仿京东放大镜
昨天跟朋友聊天时说到京东页面展示商品的放大镜，正好今天得空写了个demo。
先说下原理：左边一张小图，右边是一张大图初始隐藏，当鼠标移入小图时大图出现。看到的大图范围只是一个比例关系很简单
懵掉了？不怕 上代码
大图的布局，超出父容器隐藏
<!--大图--><div id="max"> <img src="img/max.jpg"/></div>
放大镜滑块的位置：
var e = e||window.event;var x = e.clientX-min.offsetLeft-slider.offsetWidth/2;var y = e.clientY-min.offsetTop-slider.offsetHeight/2;
接下来给放大镜滑块限定移动范围：
//设定放大镜滑块移动的范围var maxWidth = min.clientWidth-slider.offsetWidth;var maxHeight = min.clientHeight-slider.offsetHeight;if(x<=0){ x=0;}else if(x>=maxWidth){ x=maxWidth; }if (y<=0) { y=0;} else if(y>=maxHeight){ y=maxHeight;} //放大镜滑块位置slider.style.left = x+‘px‘;slider.style.top = y+‘px‘;
好像缺点什么，大图的位置呢！确定位置之前要设定个放大比例
//放大比例var scale = maxImg.offsetWidth/minImg.offsetWidth;
现在大图位置自然有了
//大图位置maxImg.style.left = -x*scale+‘px‘;maxImg.style.top = -y*scale+‘px‘;
有兴趣的童鞋可以查看源码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 /*小图容器*/ 8 #min{ 9 border: 1px solid #ccc;10 position: relative;11 }12 /*放大镜滑块*/13 #slider{14 width: 225px;15 height: 225px;16 background-color: lightyellow;17 position: absolute;18 top: 0;19 left: 0;20 opacity: 0.8;21 display: none;22 /*改变鼠标形状*/23 cursor: move;24 }25 /*大图容器*/26 #max{27 width: 400px;28 height: 400px;29 border: 1px solid #ccc;30 position: absolute;31 overflow: hidden;32 top: 8px;33 left:470px ;34 display: none;35 }36 /*大图图片绝对定位*/37 #max img{38 position: absolute;39 }40 </style>41 </head>42 <body>43 <!--小图-->44 <div id="min">45 <!--放大镜滑块-->46 <div id="slider"></div>47 <img src="img/min.jpg"/>48 </div>49 <!--大图-->50 <div id="max">51 <img src="img/max.jpg"/>52 </div>53 </body>54 <script type="text/javascript">55 //封装函数 通过id获取元素56 function get(type){57 return document.getElementById(type);58 }59 var slider = get(‘slider‘),min = get(‘min‘),max = get(‘max‘);60 var maxImg = document.querySelector(‘#max img‘);//获取大图61 var minImg = document.querySelector(‘#min img‘);//获取小图62 //鼠标移入事件63 min.onmousemove = function(e){64 slider.style.display = ‘block‘;65 max.style.display = ‘block‘;66 //让滑块随鼠标移动67 var e = e||window.event;68 var x = e.clientX-min.offsetLeft-slider.offsetWidth/2;69 var y = e.clientY-min.offsetTop-slider.offsetHeight/2;70 //设定放大镜滑块移动的范围71 var maxWidth = min.clientWidth-slider.offsetWidth;72 var maxHeight = min.clientHeight-slider.offsetHeight;73 if(x<=0){74 x=0;75 }else if(x>=maxWidth){76 x=maxWidth;77 }78 if (y<=0) {79 y=0;80 } else if(y>=maxHeight){81 y=maxHeight;82 } 83 //放大镜滑块位置84 slider.style.left = x+‘px‘;85 slider.style.top = y+‘px‘;86 //放大比例87 var scale = maxImg.offsetWidth/minImg.offsetWidth;88 //大图位置89 maxImg.style.left = -x*scale+‘px‘;90 maxImg.style.top = -y*scale+‘px‘;91 92 }93 //鼠标移出事件94 min.onmouseleave = function(){95 slider.style.display = ‘none‘;96 max.style.display = ‘none‘;97 }98 </script>99 </html>
仿京东放大镜
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。