| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| <style> | |
| *{ | |
| margin: 0;padding: 0; | |
| } | |
| ul{ | |
| list-style: none; | |
| } | |
| div{ | |
| width: 1200px; | |
| height: 400px; | |
| margin: 50px auto 0; | |
| border: 1px solid red; | |
| overflow: hidden; | |
| } | |
| div ul li{ | |
| width: 240px; | |
| height: 400px; | |
| float: left; | |
| } | |
| div ul{ | |
| width: 1300px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div> | |
| <ul> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| </ul> | |
| </div> | |
| <script src='js/animate.js'></script> | |
| <script> | |
| window.onload = function() { | |
| // 获取盒子 | |
| var box = document.getElementsByTagName('div'); | |
| // 获取所有li | |
| var lis = box[0].children[0].children; | |
| // 给每一个li添加背景 | |
| for(var i = 0;i < lis.length;i++){ | |
| var li = lis[i]; | |
| li.style.backgroundImage = 'url(images1/images/'+(i+1)+'.jpg)'; | |
| // 每一个li都需要一个鼠标滑过事件 | |
| li.onmouseover = function() { | |
| // 排他 | |
| for(var j = 0;j < lis.length;j++){ | |
| animate(lis[j],{width:100}); | |
| } | |
| // 让自己编程800 | |
| animate(this,{width:800}); | |
| } | |
| li.onmouseout = function() { | |
| for(var j = 0;j < lis.length;j++){ | |
| animate(lis[j],{width:240}); | |
| } | |
| } | |
| } | |
| }//onload | |
| </script> | |
| </body> | |
| </html> |
来源：https://www.cnblogs.com/zykzyk/p/11390749.html