1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <img src="img/img_01.jpg" alt="" width="250">
9
10 <script>
11 window.onload = function (ev) {
12 var logo = document.getElementsByTagName('img')[0];
13
14 // 1) 新的事件
15 logo.onmouseover = function (ev1) {
16 console.log('-------鼠标进入图片');
17 this.setAttribute('src', 'img/img_02.jpg');
18 };
19
20 logo.onmouseout = function (ev1) {
21 console.log('-------鼠标离开图片');
22 this.setAttribute('src', 'img/img_01.jpg');
23 };
24
25 logo.onmousemove = function (ev1) {
26 console.log('-------鼠标在图片上移动');
27 };
28 }
29 </script>
30 </body>
31 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title></title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 list-style: none;
12 }
13
14 #box {
15 border: 1px solid #cccccc;
16 width: 360px;
17 height: 70px;
18 padding-top: 360px;
19 margin: 100px auto;
20 background: url("images/01big.jpg") no-repeat;
21 }
22
23 ul {
24 display: flex;
25 justify-content: center;
26 align-items: center;
27 cursor: pointer;
28 }
29 </style>
30 </head>
31
32 <body>
33 <div id="box">
34 <ul>
35 <li id="li01"><img src="images/01.jpg" alt=""></li>
36 <li id="li02"><img src="images/02.jpg" alt=""></li>
37 <li id="li03"><img src="images/03.jpg" alt=""></li>
38 <li id="li04"><img src="images/04.jpg" alt=""></li>
39 <li id="li05"><img src="images/05.jpg" alt=""></li>
40 </ul>
41 </div>
42 <script>
43 window.onload = function (ev) {
44 // 1. 获取标签
45 var li01 = document.getElementById('li01');
46 var li02 = document.getElementById('li02');
47 var li03 = document.getElementById('li03');
48 var li04 = document.getElementById('li04');
49 var li05 = document.getElementById('li05');
50 var box = document.getElementById('box');
51
52 // 2. 监听鼠标的事件
53 li01.onmouseover = function (ev1) {
54 box.style.background = 'url("images/01big.jpg") no-repeat'
55 };
56 li02.onmouseover = function (ev1) {
57 box.style.background = 'url("images/02big.jpg") no-repeat'
58 };
59 li03.onmouseover = function (ev1) {
60 box.style.background = 'url("images/03big.jpg") no-repeat'
61 };
62 li04.onmouseover = function (ev1) {
63 box.style.background = 'url("images/04big.jpg") no-repeat'
64 };
65 li05.onmouseover = function (ev1) {
66 box.style.background = 'url("images/05big.jpg") no-repeat'
67 }
68 }
69 </script>
70 </body>
71
72 </html>
1 <script>
2 window.onload = function (ev) {
3 // 1. 获取标签
4 var li01 = $('li01');
5 var li02 = $('li02');
6 var li03 = $('li03');
7 var li04 = $('li04');
8 var li05 = $('li05');
9 // 2. 监听鼠标的事件
10 li01.onmouseover = function (ev1) {
11 changeImg('box', 1);
12 };
13 li02.onmouseover = function (ev1) {
14 changeImg('box', 2);
15 };
16 li03.onmouseover = function (ev1) {
17 changeImg('box', 3);
18 };
19 li04.onmouseover = function (ev1) {
20 changeImg('box', 4);
21 };
22 li05.onmouseover = function (ev1) {
23 changeImg('box', 5);
24 }
25 };
26
27 function $(id) {
28 return typeof id === 'string' ? document.getElementById(id): null;
29 }
30 function changeImg(liId, index) {
31 $(liId).style.background = 'url("images/0'+ index + 'big.jpg") no-repeat';
32 }
33 </script>
1 window.onload = function (ev) {
2 // 1. 获取需要的标签
3 var box = document.getElementById('box');
4 var allLis = box.getElementsByTagName('li');
5
6 // 2. 监听鼠标进入li标签
7 for (var i = 0; i < allLis.length; i++) {
8 // 2.1 取出单独的li标签
9 var sLi = allLis[i];
10 sLi.index = i+1;
11 sLi.onmouseover = function (ev1) {
12 box.style.background = 'url("images/0'+ this.index +'big.jpg") no-repeat'
13 }
14
15 }
16 }
1 window.onload = function (ev) {
2 // 1. 获取需要的标签
3 var box = document.getElementById('box');
4 var allLis = box.getElementsByTagName('li');
5
6 // 2. 监听鼠标进入li标签
7 for (var i = 0; i < allLis.length; i++) {
8 // 2.1 取出单独的li标签
9 var sLi = allLis[i];
10 sLi.index = i+1;
11 // 闭包 封闭作用域
12 (function (tag) {
13 sLi.onmouseover = function (ev1) {
14 box.style.background = 'url("images/0'+ tag +'big.jpg") no-repeat'
15 }
16 })(i+1) // 1, 2, 3, 4, 5*/ i+1实参 tag 形参
17
18 }
19 }
