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

青旅半醒 2021-11-22 09:32 339阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]

<!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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]: /images/20211122/8e60646c34584447a4d098d1152e902b.png