JavaScript （实例：实现鼠标移动到图片上后图片放大同时不超出指定范围）

最新推荐文章于 2024-09-22 17:30:40 发布

HeartIsland

最新推荐文章于 2024-09-22 17:30:40 发布

阅读量6.8k

点赞数 6

分类专栏： JavaScript 文章标签： JS入门 JS基础 JavaScript html

本文链接：https://blog.csdn.net/HeartIsland/article/details/47368389

版权

JavaScript 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<meta charset="UTF-8"/>
	<head>
		<title>图片放大</title>
		<style>
			div {/*控制图片最终大小，防止放大后图片大小溢出*/
				width : 200px;//
				height : 200px;
				overflow : hidden;
				border:solid 4px #000;
			}
			
			img {
				transition : -webkit-transform 3s;/*延迟效果*/
			}
			
			img:hover {
				transform: scale(1.5,1.5);/*放大的倍数*/
			}	
		</style>
	</head>
	<body>	
		<div><img src="Koala.jpg" width="200" height="200"/></div>
	</body>
</html>