放大镜具体效果为：一张图片，鼠标移上去出现一个半透明的框，随着鼠标移动，半透明框随着鼠标移动，且鼠标始终处于半透明框的中间，同时在特定区域显示被半透明框覆盖图片部分的放大部分。如下图所示：
分析：要实现如图效果，需要处理两方面的事件。
问题一：要获取鼠标位置，并且鼠标始终处于半透明框的中心位置；且半透明框可以随鼠标移动而移动。
解决一：可以使用来获取鼠标的位置，并且处理兼容性问题，半透明框绝对定位，可以通过控制left和top值来控制它的移动，可以通过减法来使鼠标位置处于框的中心，并且可以通过最大最小left和top值来控制半透明框不能移除图片。
问题二：如何使下方出现图片并且可以显示不同区域。
解决二：下部设置两个DIV，大的包含在小的里面，设置图片为背景，小的overflow=hidden；通过控制它的scrollLeft和scrollTop值让他滚动。
问题三：如何将半透明框覆盖区域和div展示框显示同步并放大。
解决三：透明框/图片=展示框/放大后图片，并且展示框值得变化等于透明框值变化的N倍。N等于前面比例的倒数。
代码如下：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 *{
8 padding: 0;
9 margin: 0;
10 }
11 #photo{
12 width: 400px;
13 height: 225px;
14 background: url("images/ico1.jpg") no-repeat;
15 position: relative;
16 }
17 #drag{
18 width: 80px;
19 height: 45px;
20 background: white;
21 opacity: 0.5;
22 position: absolute;
23 left: 0;
24 top: 0;
25 display: none;
26 }
27 #show{
28 margin-top: 20px;
29 width: 400px;
30 height: 225px;
31 overflow: hidden;
32 display: none;
33 }
34 #big{
35 width: 2000px;
36 height: 1125px;
37 background: url("images/ico1.jpg") no-repeat;
38 background-size: 100%;
39 }
40 </style>
41 </head>
42 <body>
43 <div id="photo">
44 <div id="drag">
45 </div>
46 </div>
47 <div id="show">
48 <div id="big">
49 </div>
50 </div>
51 <script type="text/javascript">
52 var photo=document.getElementById("photo");
53 var drag=document.getElementById("drag");
54 var show=document.getElementById("show");
55 var big=document.getElementById("big");
56 window.onmousemove=function(event){
57 //兼容性处理
58 var e=event||window.event;
59 //为了使鼠标处于透明框的中心部位，需要用鼠标位置减去透明框宽度和高度的一半
60 //x,y分别为经过处理后的鼠标横纵坐标
61 var x= e.clientX-drag.offsetWidth/2;
62 var y= e.clientY-drag.offsetHeight/2;
63 //maxL,maxT分别为最大横向和最大纵向移动距离
64 var maxL=photo.offsetWidth-drag.offsetWidth;
65 var maxT=photo.offsetHeight-drag.offsetHeight;
66 //如果横向坐标超过最大距离，使横向坐标等于最大距离
67 if(x>=maxL){
68 x=maxL;
69 }
70 //如果横向坐标小于最大距离，使横向坐标等于0
71 if(x<=0){
72 x=0;
73 }
74 //如果纵向坐标超过最大距离，使纵向坐标等于最大距离
75 if(y>=maxT){
76 y=maxT;
77 }
78 //如果纵向坐标小于0，使纵向坐标等0
79 if(y<=0){
80 y=0;
81 }
82 //控制透明框的位置
83 drag.style.left=x+"px";
84 drag.style.top=y+"px";
85 //控制展示框显示的位置
86 show.scrollLeft=5*x;
87 show.scrollTop=5*y;
88 }
89 //图片的鼠标移入事件
90 photo.onmouseover=function(){
91 //透明框和展示框出现
92 show.style.display="block";
93 drag.style.display="block";
94 }
95 //图片的鼠标移出事件
96 photo.onmouseout=function(){
97 //透明框和展示框隐藏
98 show.style.display="none";
99 drag.style.display="none";
100 }
101 </script>
102 </body>
103 </html>
布局说明:透明框的大小为图片的1/5，展示框的大小为放大后图片的1/5，展示框大小可变，但宽高按比例约束。
时间： 2024-08-24 10:26:47