原生js实现放大镜特效

最新推荐文章于 2024-02-22 12:31:34 发布

转载最新推荐文章于 2024-02-22 12:31:34 发布 · 45 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gaoxuerong123/p/7787977.html

本文介绍了一种网页中实现图片放大镜效果的方法。通过HTML、CSS及JavaScript代码展示了如何为图片添加交互式的放大功能，包括鼠标悬停显示、跟随鼠标移动的透明框以及对应放大的图片区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不多说，上代码

图片自备哈

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>放大镜特效</title>
 6         <style>
 7             a,address,b,big,blockquote,body,center,cite,code,dd,del,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,i,iframe,img,ins,label,legend,li,ol,p,pre,small,span,strong,u,ul{margin:0;padding:0}
 8             body{background: #ccc;}
 9         
10             #img1{position: relative;width: 450px; height: 450px; overflow: hidden;margin: 20px;}
11         
12             #img1 span{display: none;display: block; top: 0;left: 0;position: absolute;width:200px;height: 200px; opacity: .5;filter: alpha(opacity=50);
13             background: #FFFF00;cursor: move;}
14             #two{display: none; width: 600px;height: 600px;overflow: hidden;position: absolute;top:0;left: 550px;}
15             #two img{position: absolute;top:0;left: 0;}
16         </style>
17     </head>
18     <body>
19         
20             <div id="img1">
21                 <img  src="img/bg1.jpg"/>
22                 <span></span>
23             </div>
24         
25         <div id="two">
26                 <img  src="img/bg2.jpg"/>
27         </div>
28     </body>
29     <script>
30         var Domimg1 = getDom('img1');
31         var spanDom = Domimg1.getElementsByTagName('span')[0];
32         var Dom2=getDom('two');
33         var imgDom2=Dom2.children[0]
34         Domimg1.onmouseover=function(){
35             spanDom.style.display='block';
36             Dom2.style.display='block';
37         }
38         Domimg1.onmouseout=function(){
39             spanDom.style.display='none';
40             Dom2.style.display='none';
41         }
42         Domimg1.onmousemove=function(e){
43             e = e || window.event;
44             
45             var x = e.clientX-this.offsetLeft-spanDom.offsetWidth/2;
46             var y = e.clientY-this.offsetTop-spanDom.offsetHeight/2;
47             if(x<0){x=0;}
48             if(y<0){y=0;}
49             if(x>this.offsetWidth-spanDom.offsetWidth){x=this.offsetWidth-spanDom.offsetWidth}
50             if(y>this.offsetHeight-spanDom.offsetHeight){y=this.offsetHeight-spanDom.offsetHeight}
51             spanDom.style.left= x+'px';
52             spanDom.style.top= y+'px';
53         
54             var xpersent=x/(this.offsetWidth-spanDom.offsetWidth);
55             var ypersent=y/(this.offsetHeight-spanDom.offsetHeight);
56             var nwidth=xpersent*(imgDom2.width-Dom2.offsetWidth);
57             var nHeight=ypersent*(imgDom2.height-Dom2.offsetHeight);
58             imgDom2.style.left = -nwidth+'px';
59             imgDom2.style.top = -nHeight+'px';
60         }
61         
62         function getDom(id){
63             return document.getElementById(id);
64         }
65     </script>
66 </html>

效果图：点击这里

转载于:https://www.cnblogs.com/gaoxuerong123/p/7787977.html