6.放大镜效果
程序员文章站
2022-05-03 23:05:22
一、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>
上一篇: LZ喜欢锻炼