| |
<!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> |
浙公网安备 33010602011771号