昨天跟朋友聊天时说到京东页面展示商品的放大镜，正好今天得空写了个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>
时间： 2024-08-02 06:13:00