javascript 鼠标移入移出改变图片透明度

最新推荐文章于 2021-09-09 09:47:43 发布

熟悉的新风景

最新推荐文章于 2021-09-09 09:47:43 发布

阅读量2.3k

点赞数 1

分类专栏： # JavaScript小案例

本文链接：https://blog.csdn.net/weixin_44797182/article/details/97241822

版权

JavaScript小案例专栏收录该内容

28 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标移入移出改变图片透明度</title>
		<style type="text/css">
			#image {
				margin: 50px auto;
				width: 700px;
				height: 600px;

			}

			img {
				border: red 3px solid;
				margin-right: 3px;
				cursor: pointer;
				opacity: 0.3;
			}

			#image .opacity {
				opacity: 1;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var oMouse = document.getElementsByTagName("img");
				for (var i = 0, item; item = oMouse[i++];) {
					item.index = i - 1;
					item.onmouseover = function() {
						this.className = "opacity";		/* 调用样式 */
					}
					item.onmouseout = function() {
						this.className = "";			/* 恢复原来的样式 */
					}

				}
			}
		</script>
	</head>

	<body>

		<div id="image">
			<script type="text/javascript">
				var oimg = document.getElementById("image");
				var str = "";
				for (var i = 1; i < 11; i++) {
					str += '<img src="image/' + i + '.jpg" >'
				}
				oimg.innerHTML = str;
			</script>
		</div>
	</body>

</html>