TOP

10-关于DOM的事件操作(三)
2019-09-06 00:28:34 】 浏览:111
Tags:10- 关于 DOM 事件 操作

); 57 var topBanner = document.getElementById('topBanner'); 58 //2.绑定事件 59 closeBanner.onclick = function(){ 60 //3.书写事件驱动程序 61 //类控制 62 //topBanner.className += ' hide';//保留原类名,添加新类名 63 //topBanner.className = 'hide'; 64 //替换旧类名 65 topBanner.style.display = 'none'; 66 } 67 } 68 </script> 69 70 71 </body> 72 </html>

2.要求实现效果:当鼠标悬停在img上时,更换为另外一张图片;鼠标离开时,还原为本来的图片。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script>
 7         //window.onload页面加载完毕以后再执行此代码
 8         window.onload = function () {
 9             //需求:鼠标放到img上,更换为另一张图片,也就是修改路径(src的值)。
10             //步骤:
11             //1.获取事件源
12             //2.绑定事件
13             //3.书写事件驱动程序
14 
15             //1.获取事件源
16             var img = document.getElementById("box");
17             //2.绑定事件(悬停事件:鼠标进入到事件源中立即出发事件)
18             img.onmouseover = function () {
19                 //3.书写事件驱动程序(修改src)
20                 img.src = "image/jd2.png";
21 //                this.src = "image/jd2.png";
22             }
23 
24             //1.获取事件源
25             var img = document.getElementById("box");
26             //2.绑定事件(悬停事件:鼠标进入到事件源中立即出发事件)
27             img.onmouseout = function () {
28                 //3.书写事件驱动程序(修改src)
29                 img.src = "image/jd1.png";
30             }
31         }
32     </script>
33 </head>
34 <body>
35 
36     <img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
37 
38 </body>
39 </html>

 

 

 

 

作者:流浪者

日期:2019-09-04

请关注公众号获取更多资料


10-关于DOM的事件操作(三) https://www.cppentry.com/bencandy.php?fid=77&id=250278

首页 上一页 1 2 3 下一页 尾页 3/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇python学习-62 类属性的增 删 该 .. 下一篇08-函数