Javascript：实现淘宝商品的鼠标移动换图（onmouseover）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
ul{list-style:none;}
#box{height:70px;
width:360px;
padding-top:360px;
border:1px solid #ccc;
margin:100px auto;
background: url(img/img3.jpg) no-repeat;
background-size: 360px 360px;}
#box ul{overflow: hidden;
border-top:1px solid #ccc;}
#box li{float:left;}
</style>
</head>
<script>
window.onload=function(){
var box=document.getElementById("box");
function fn(liId,bg){
var obj=document.getElementById(liId);
obj.onmouseover=function(){
box.style.backgroundImage=bg;
}
}
fn("li01","url(img/img1.jpg)");
fn("li02","url(img/img2.jpg)");
fn("li04","url(img/img4.jpg)");
fn("li05","url(img/img5.jpg)");
fn("li06","url(img/img6.jpg)");
}
</script>
<body>
<div id="box">
<ul>
<li id="li01"><img src="img/img1.jpg" width="72px" height="70px" alt=""></li>
<li id="li02"><img src="img/img2.jpg" width="72px" height="70px" alt=""></li>
<li id="li04"><img src="img/img4.jpg" width="72px" height="70px" alt=""></li>
<li id="li05"><img src="img/img5.jpg" width="72px" height="70px" alt=""></li>
<li id="li06"><img src="img/img6.jpg" width="72px" height="70px" alt=""></li>
</ul>
</div>
</body>
</html>
