标签：style 效果 img 放大镜 top cover small left
放大镜效果
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>放大镜效果</title>
5 <style type="text/css">
6 .samllImg{
7 position: relative;
8 width: 215px;
9 height: 215px;
10 }
11 .samllImg img{
12 width:215px;
13 height: 215px;
14 }
15 .samllImg span{
16 display: none;
17 width:107.5px;
18 height:107.5px;
19 position: absolute;
20 top:0px;
21 left:0px;
22 background-color: rgba(100,100,10,0.3);;
23 }
24 .bigImg{
25 display: none;
26 width: 215px;
27 height: 215px;
28 background-image: url("image/0.jpg");
29 background-repeat: no-repeat;
30 position: absolute;
31 left:225px;
32 top:0
33 }
34 </style>
35 </head>
36 <body>
37 <div class="samllImg">
38 <img src="image/0.jpg">
39 <span class="cover"></span>
40 <div class="bigImg"></div>
41 </div>
42 <script type="text/javascript">
43 window.onload = function(){
44 // 通过类名获取元素
45 function $(className) {
46 return document.getElementsByClassName(className)[0];
47 }
48 // 放大镜效果
49 function magnifier(small_img,cover,big_img) {
50 $(small_img).onmouseover= function(){
51 $(cover).style.display="block";
52 $(big_img).style.display="block";
53 $(small_img).onmousemove = function(e) {
54 e = e || event; //浏览器兼容
55 let left = e.pageX-$(small_img).offsetLeft-$(cover).offsetWidth*0.5;
56 let top = e.pageY-$(small_img).offsetTop-$(cover).offsetHeight*0.5;
57 left = left<=0?0:(left>$(small_img).offsetWidth-$(cover).offsetWidth+$(small_img).offsetLeft?$(small_img).offsetWidth-$(cover).offsetWidth:left);
58 top = top<=0?0:(top>$(small_img).offsetHeight-$(cover).offsetHeight+$(small_img).offsetTop?$(small_img).offsetHeight-$(cover).offsetHeight:top);
59 $(cover).style.left = left + "px";
60 $(cover).style.top = top + "px";
61 let leftPos = left/$(small_img).offsetWidth*430;
62 let topPos = top/$(small_img).offsetHeight*430;
63 $(big_img).style.backgroundPosition=`${-leftPos}px ${-topPos}px`;
64 }
65 }
66 $(small_img).onmouseout = function() {
67 $(cover).style.display="none";
68 $(big_img).style.display="none";
69 }
70 }
71 magnifier("samllImg","cover","bigImg");
72 }
73 // 考虑一个问题：如果图片像素和盒子模型的大小不一致时，如何实现效果？（暂时还未实现）
74 </script>
75 </body>
76 </html>
标签：style,效果,img,放大镜,top,cover,small,left 来源： https://www.cnblogs.com/shannen/p/14054844.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。