4.京东狗
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
25 //1.獲取事件源
26 var img = document.getElementById("box");
27 //2.綁定事件(懸停事件：鼠標進入到事件源中立即出發事件)
28 img.onmouseout = function () {
29 //3.書寫事件驅動程序(修改src)
30 this.src = "image/jd1.png";
31 }
32
33 //獲取事件源（元素可以不獲取直接使用id的值）
34 // var img = document.getElementById("box");
35 // //調用函數
36 // img.onmouseover = fn1;
37 // img.onmouseout = fn2;
38 // //定義函數
39 // function fn1() {
40 // img.src = "image/jd2.png";
41 // }
42 // function fn2() {
43 // img.src = "image/jd1.png";
44 // }
45
46 }
47 </script>
48 </head>
49 <body>
50
51 <img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
52
53 </body>
54 </html>
?
轉載于:https://www.cnblogs.com/BingBing-Deng/p/10427019.html
總結
- 上一篇： 获取浏览器和屏幕各种高度宽度
- 下一篇： AVR32单片机 矩阵按键 按键键值函数