案例：筋斗雲 滑鼠進入，一朵雲的樣式跟隨滑鼠移動，滑鼠點擊後離開，雲樣式回到上次點擊的位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; pa ...
案例：筋斗雲
滑鼠進入，一朵雲的樣式跟隨滑鼠移動，滑鼠點擊後離開，雲樣式回到上次點擊的位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } ul { list-style: none } body { background-color: #333; } .nav { width: 800px; height: 42px; margin: 100px auto; background: url(images/rss.png) right center no-repeat; background-color: #fff; border-radius: 10px; position: relative; } .nav li { width: 83px; height: 42px; text-align: center; line-height: 42px; float: left; cursor: pointer; } .nav span { position: absolute; top: 0; left: 0; width: 83px; height: 42px; background: url(images/cloud.gif) no-repeat; } ul { position: relative; } </style> </head> <body> <div class="nav"> <span id="cloud"></span> <ul id="navBar"> <li>北京校區</li> <li>上海校區</li> <li>廣州校區</li> <li>深圳校區</li> <li>武漢校區</li> <li>關於我們</li> <li>聯繫我們</li> <li>招賢納士</li> </ul> </div> <script src="common.js"></script> <script> //獲取雲彩 var cloud = my$("cloud"); //獲取所有的li標簽 var list = my$("navBar").children; //迴圈遍歷分別註冊滑鼠進入，滑鼠離開，和滑鼠點擊事件 for (var i = 0; i < list.length; i++) { //滑鼠進入事件 list[i].onmouseover = mouseoverHandle; //滑鼠點擊事件 list[i].onclick = clickHandle; //滑鼠離開事件 list[i].onmouseout = mouseoutHandle; } function mouseoverHandle() { //進入 //移動到滑鼠此次進入的li的位置 animate(cloud, this.offsetLeft); } //點擊的時候，記錄此次點擊的位置 var lastPosition = 0; function clickHandle() {//點擊 lastPosition = this.offsetLeft; } function mouseoutHandle() {//離開 animate(cloud, lastPosition); } </script> </body> </html>
