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