网上有许多放大镜的jquery的插件，但是用着不是那么得心应手，现在一页代码实现一个放大镜功能，如果需要附加的功能可以手动修改，原理都在注释里
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>放大镜效果</title> <style type="text/css"> * { margin: 0; padding: 0; } .small { margin-left:40px; margin-top:50px; 150px; height: 150px; /*border: 2px solid yellow;*/ } .small>img { 150px; height: 150px; } .slider { 50px; height: 50px; background: rgba(180,180,135,0.3); position: absolute; display: none; } #big { //设置为固定大小; 200px; height: 200px; position: absolute; /* border: 2px solid red;*/ overflow: hidden; display: none; } </style></head><body><!--缩略图--><p class="small"> <img src="thumb.jpg" /> <!--放大镜,在原图不上的小块--> <p class="slider"></p></p><!--放大镜区域，大图，设置为none隐藏--><p id="big"> <img id="bigImg" src="big.jpg" /></p>even.clientX<input type="text" value="0" id="test" /><br/>even.clientY<input type="text" value="0" id="test1" /><script type="text/javascript" src="jquery-1.7.2.min.js"></script><script type="text/javascript"> var small = $(".small")[0]; var slider = $(".slider")[0]; var big = document.getElementById("big");//试一试js获取 var bigImg = document.getElementById("bigImg");//让slider跟随鼠标移动.给小的方块绑定事件 $(".small").mousemove(function(e) { var even = e || event; //兼容火狐浏览器 var x = even.clientX - small.offsetLeft - slider.offsetWidth/2; var y = even.clientY - small.offsetTop - slider.offsetHeight/2;//测试even.clientX和even.clientY $("#test").val(even.clientX); $("#test1").val(even.clientY);//水平方向的最大值 var maxX = small.clientWidth - slider.clientWidth;//竖直方向的最大值 var maxY = small.clientHeight - slider.clientHeight; if(x<0){//相当于超出左侧,超出左侧时,拉回 x=0; }//超出右侧时拉回 if(x>maxX){ x = maxX; }//顶部超出 if(y<0){ y=0; }//底部超出 if(y>maxY){ y = maxY; } slider.style.top = (y+small.offsetTop) + "px"; slider.style.left = (x+small.offsetLeft) + "px";//放大的图片的主要实现代码:比例计算, big.scrollLeft是id=big的p中下方滚轴的位置//由于id=big的p设置成固定大小，而图片又非常大，所以这个p就像个放大镜一样在大图上晃//比例计算很简单，鼠标在缩略图的位置与缩略图宽高比=鼠标在大图位置与大图宽高比，现在未知数是大图鼠标的位置 big.scrollLeft = x/maxX * (bigImg.clientWidth - big.clientWidth) ; big.scrollTop = y/maxY * (bigImg.clientHeight -big.clientHeight) ; });//鼠标移入事件 $(".small").mouseenter(function(){//鼠标移入到缩略图时候实现,上面出现的小的方块 $(".slider").css("display","block"); $("#big").css("top",small.offsetTop+"px");//隐藏的大图=获取左图的左边位置+宽度+10(隔开点缝隙与缩略图)+px big.style.left = small.offsetLeft + small.offsetWidth + 10 + "px";//右侧的大图区域显示出来图片 $("#big").css("display","block"); });//移除事件//添加鼠标移出事件,鼠标移出缩略图的时候 $(".small").mouseleave(function(){ $(".slider").css("display","none"); $("#big").css("display","none"); }); </script></body></html> |
相关推荐：