js_图片放大镜

最新推荐文章于 2024-10-05 01:22:45 发布

「已注销」

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量395

点赞数

分类专栏： JavaScript学习文章标签： javascript html 图片放大

本文链接：https://blog.csdn.net/fang0609/article/details/47778933

版权

JavaScript学习专栏收录该内容

5 篇文章 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>

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