仿京东放大镜
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了仿京东放大镜相关的知识，希望对你有一定的参考价值。
昨天跟朋友聊天时说到京东页面展示商品的放大镜，正好今天得空写了个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>
以上是关于仿京东放大镜的主要内容，如果未能解决你的问题，请参考以下文章