6.放大镜效果
程序员文章站
2022-09-30 20:14:05
一、html，css部分 二、js部分 三、源代码部分 ......
一、html，css部分
二、js部分
三、源代码部分
1 <head>
2 <meta charset="utf-8">
3 <meta name="viewport" content="width=device-width, initial-scale=1.0">
4 <meta http-equiv="x-ua-compatible" content="ie=edge">
5 <title>document</title>
6 <style>
7 * {
8 margin: 0px;
9 padding: 0px;
10 list-style: none;
11 }
12
13 #left {
14 display: inline-block;
15 margin: 50px 0 0 50px;
16 width: 300px;
17 height: 230px;
18 position: relative;
19 top: 125px;
20 }
21
22 #right {
23 display: inline-block;
24 width: 500px;
25 height: 400px;
26 overflow: hidden;
27 position: absolute;
28 top: 175px;
29 left: 450px;
30 display: none;
31 }
32
33 #leftson {
34 width: 180px;
35 height: 140px;
36 border: 1px solid #666;
37 background-color: rgba(90, 90, 90, 0.45);
38 position: absolute;
39 display: none;
40 position: absolute;
41 }
42
43 #big {
44 position: absolute;
45 }
46 </style>
47 </head>
48
49 <body>
50 <div id="left">
51 <div id="leftson"></div>
52 <img src="img/smallpic.jpg" alt="">
53 </div>
54 <div id="right">
55 <img id="big" src="img/bigpic.jpg" alt="">
56 </div>
57 <script>
58 //-----获取所需要的元素节点-----
59 var leftobj = document.getelementbyid('left');
60 var leftsonobj = document.getelementbyid('leftson');
61 var rightobj = document.getelementbyid('right');
62 var bigimg = document.getelementbyid('big');
63 //-----显示事件-----
64 leftobj.onmouseover = function () {
65 leftsonobj.style.display = 'block';
66 rightobj.style.display = 'block';
67 }
68 //-----隐藏事件-----
69 leftobj.onmouseout = function () {
70 leftsonobj.style.display = 'none';
71 rightobj.style.display = 'none';
72 }
73 //-----移动事件-----
74 document.onmousemove = function (e) {
75 var oevent = e || event;
76 //-----获取当前鼠标的 x,y 坐标，
77 //-----并减去leftobj距窗口边距的距离，
78 //-----并减去leftsonobj可视宽度，高度的一半，
79 //----------------------------------------
80 //-----目的，将鼠标定在leftsonobj(透明小块)的正中间--------
81 var top = oevent.clienty - leftobj.offsettop - leftsonobj.offsetheight / 2;
82 var left = oevent.clientx - leftobj.offsetleft - leftsonobj.offsetwidth / 2;
83 //-----判断，并将leftsonobj(透明小块)固定在他的父盒子内部------
84 if (top <= 0) {
85 top = 0
86 } else if (top >= leftobj.offsetheight - leftsonobj.offsetheight) {
87 top = leftobj.offsetheight - leftsonobj.offsetheight
88 }
89 if (left <= 0) {
90 left = 0;
91 } else if (left > leftobj.offsetwidth - leftsonobj.offsetwidth) {
92 left = leftobj.offsetwidth - leftsonobj.offsetwidth;
93 }
94 //-----获取leftsonobj(透明小块)与leftobj(他的父盒子)的长宽差值------
95 //-----并用left，top分别除以他们，获取比例(percentx)(percenty)------
96 var percentx = left / (leftobj.offsetwidth - leftsonobj.offsetwidth);
97 var percenty = top / (leftobj.offsetheight - leftsonobj.offsetheight);
98 //-----赋值部分-----
99 leftsonobj.style.top = top + 'px';
100 leftsonobj.style.left = left + 'px';
101 //-----获取bigimg(大图片)与rightobj(他的父盒子)的差值------
102 //-----并将他们乘以比例值(percentx)(percenty)------
103 bigimg.style.top = - percenty * (bigimg.offsetheight - rightobj.offsetheight) + 'px';
104 bigimg.style.left = - percentx * (bigimg.offsetwidth - rightobj.offsetwidth) + 'px';
105 }
106 </script>
107 </body>
上一篇： 怀孕紫薯可以吃吗？要怎么吃？