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

青旅半醒 2021-11-22 09:32 409阅读 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

发表评论取消回复

表情：

评论列表（有 0 条评论，409人围观）

还没有评论，来说两句吧...

相关阅读

相关关于鼠标移入移出等各种状态的绑定

直接上代码把：绑定的方法实现： EventTrigger.Entry CommonBind(EventTriggerType type, UnityAction<

淡淡的烟草味﹌/ 2023年08月17日 16:52/ 0 赞/ 101 阅读

相关 JavaScript——鼠标移入移出事件

onmouseenter / onmouseleave 和 onmouseover / onmouseout的关系 onmouseenter 类似 mouseover，它

àì夳堔傛蜴生んèń/ 2023年06月27日 04:25/ 0 赞/ 84 阅读

相关页面鼠标移入移出、点击显示隐藏的处理

我们在页面开发中比较常见的功能是鼠标移入移出，或点击时，需要特定元素显示或隐藏的操作，实现方法很多，下面给出比较通用的方法注：需要页面引入jquery，这个不用多说。页

àì夳堔傛蜴生んèń/ 2022年11月05日 10:57/ 0 赞/ 250 阅读

相关 Vue中鼠标移入移出事件-解析

> 鼠标在li上移动也会触发移出事件两组鼠标事件 > mouseover 和 mouseout > mouseenter 和 mouseleave mous

你的名字/ 2022年09月10日 14:24/ 0 赞/ 293 阅读

相关鼠标移入显示图片案例

一.需要的效果 1）.未移入前 ![70][] 2）.鼠标移入后 ![70 1][] 3）.鼠标移出 ![70 2][] 二.实现代码 <!DOCTYP

淡淡的烟草味﹌/ 2022年05月13日 09:54/ 0 赞/ 333 阅读

相关鼠标的移入移出事件

一介绍鼠标的移入和移出事件分别是onmouseover和onmousemove事件。其中，onmouseover事件在鼠标移动到对象上方时触发事件处理程序，onmou

你的名字/ 2022年05月11日 23:58/ 0 赞/ 686 阅读

相关 vue实现鼠标移入移出显示或者隐藏div

我的qq 2038373094 效果如下 ![2019050714084878.gif][] -------------------- html代码

叁歲伎倆/ 2022年02月04日 09:23/ 1 赞/ 1791 阅读

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

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

青旅半醒/ 2021年11月22日 09:32/ 0 赞/ 410 阅读

相关鼠标移入移出双击单击事件

qq交流群： 581478349 <!DOCTYPE html> <html> <head>

- 日理万妓/ 2021年09月18日 14:44/ 0 赞/ 422 阅读

相关动态添加class名，改变标签样式（包含鼠标移入、移出及点击事件）

1、常用的适用场景：多个超链接标签之间，通过点击实现页面跳转。 2、具体代码： <!DOCTYPE html> <html> <

柔光的暖阳◎/ 2021年09月15日 01:44/ 0 赞/ 685 阅读