js_图片放大镜

深碍√TFBOYSˉ_ 2022-08-04 05:25 245阅读 0赞

使用JavaScript语法对鼠标经过的地方进行放大处理，它和上一篇截图一样都用到了clip:rect(top right bottom left);具体代码如下：

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>js_放大镜</title>
    <script>
       var img1,img2,dd;
       window.onload = function() {
    	    img1 = document.getElementById("img1");
    		img2 = document.getElementById("img2");
    		dd = document.getElementById("dd");
    		img1.addEventListener("mousemove",function() {
    			dd.style.display = "";
    			var mouseX = event.clientX;
    			var mouseY = event.clientY;
    			dd.style.left = mouseX-50 + "px";
    			dd.style.top = mouseY-50 + "px";
    			var rtop = mouseY-10-50;
    			var rleft = mouseX- 10 -50;
    			var rwidth = rleft+100;
    			var rheight = rtop+100;
    			img2.style.clip = "rect("+rtop+"px "+rwidth+"px "+rheight+"px "+rleft+"px)";
    			img2.style.zoom = 2;
    			img2.style.left = (600-2*mouseX)/2+100+"px";
    			img2.style.top = 10-mouseY + 60+"px";
    			/*
    			clip:rect(top right bottom left);
    	        所得到的图片的高度为(bottom-top)，宽度为(left-right)
    			放大4倍
    			img2.style.zoom = 4;
    			img2.style.left = (600-4*mouseX)/4+100+"px";
    			img2.style.top = 10-mouseY + 60+"px";
    			*/
    		},true);
    		img1.addEventListener("mouseout",function() {
    			dd.style.display = "none";
    		},true);
       }
    </script>
    <style>
       #img1 {
    	   position:absolute;
    	   left:10px;
    	   top:10px;  
       }
       #img2 {
    	   position:absolute;
    	   right:10px;
    	   top:10px; 
       }
       #dd {
    	   position:absolute;
    	   left:10px;
    	   top:10px;
    	   width:100px;
    	   height:100px;
    	   border:1px solid blue; 
       }
    </style>
    </head>
    
    <body>
    <div id="a">
       <img id="img1" src="2.2.png">
       <img id="img2" src="2.2.png">
       <div id="dd">
    </div>
    </body>
    </html>

虽然放大的效果实现了，但仍存在许多不足之处，望多多指教。