js控制圖像等比例縮放

時間 2019-11-30

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
	<title>圖片內部放大效果</title>
<meta charset="utf-8">
<style type="text/css">
	#imgborder{ width: 200px;height: 160px;border: 3px solid #000; overflow: hidden;position: relative;padding: 0px;margin:0px;}
	#firstimg{ position: absolute; animation: myan 3s;}
	/*@keyframes myan {
		from{width: 200px;}
		to{width: 500px;}
		
	}*/
</style>
</head>
<body>
<div id="imgborder">
<img src="dog.jpg" id="firstimg">
</div>
</body>
<script type="text/javascript">
		var fimg = document.getElementById('firstimg');
		var imgb = document.getElementById('imgborder');
		var initial = 0;
	
			fimg.onmouseover = function(){
			// img設置寬度，高都會等比例變大
			initial = fimg.width;
			fimg.width=fimg.width*1.2;
			// fimg.height=fimg.height*1.1;
			// alert(imgb.clientWidth);
		 	fimg.style.left=-(fimg.width-imgb.clientWidth)/2+"px";
		 	 fimg.style.top=-(fimg.height-imgb.clientHeight)/2+"px";
		 	// alert(fimg.style.top);
		}
	
		fimg.onmouseout = function(){

			fimg.width = initial;
			fimg.style.left="0px";
			fimg.style.top="0px";
		}
	
		
	</script>
</html>

相關標籤/搜索