淘宝宝贝图片展示，鼠标放上去只有最后一个li有效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
*{ margin:0; padding:0;}
ul{ list-style:none;}
#box {
height:70px;
width:360px;
padding-top:360px;
border:1px solid #ccc;
background: url(images/01big.jpg) no-repeat;
overflow:hidden;
margin:100px auto;
}
#box ul{
overflow:hidden;
border-top:1px solid #ccc;
}
#box li{
float:left;
}
</style>
<script>
window.onload = function(){
var box = document.getElementById('box');
function fn(bg){
var lis = box.getElementsByTagName('li');
for( var i = 0; i<lis.length; i++){
lis[i].onmouseover = function(){
box.style.backgroundImage = bg;
}
}
}
fn('url(images/01big.jpg)');
fn('url(images/02big.jpg)');
fn('url(images/03big.jpg)');
fn('url(images/04big.jpg)');
fn('url(images/05big.jpg)');
}
</script>
<body>
<div id="box">
<ul>
<li><img src="images/01.jpg" alt="" /></li>
<li><img src="images/02.jpg" alt="" /></li>
<li><img src="images/03.jpg" alt="" /></li>
<li><img src="images/04.jpg" alt="" /></li>
<li><img src="images/05.jpg" alt="" /></li>
</ul>
</div>
</body>
</html>
图像7892回答
-
OlderSkee
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title></head><style> *{ margin:0; padding:0;} ul{ list-style:none;} #box { height:70px; width:360px; padding-top:360px; border:1px solid #ccc; background: url(images/01big.jpg) no-repeat; overflow:hidden; margin:100px auto; } #box ul{ overflow:hidden; border-top:1px solid #ccc; } #box li{ float:left; }</style><script> window.onload = function(){ var box = document.getElementById('box'); var lis = box.getElementsByTagName("li"); for (var i=0;i<lis.length;i++){ lis[i].index = i lis[i].onmouseover = function () { box.style.backgroundImage = 'url(images/0'+( this.index +1 )+'big.jpg)' } } }</script><body><div id="box"> <ul> <li><img src="images/01.jpg" alt="" /></li> <li><img src="images/02.jpg" alt="" /></li> <li><img src="images/03.jpg" alt="" /></li> <li><img src="images/04.jpg" alt="" /></li> <li><img src="images/05.jpg" alt="" /></li> </ul></div></body></html>在我这里跑是没有问题的 -
OlderSkee
因为你这样 for执行了之后i永远是 5 ，所以只会显示 5。var box = document.getElementById('box');var lis = box.getElementsByTagName("li");for (var i=0;i<lis.length;i++){ lis[i].index = i lis[i].onmouseover = function () { box.style.backgroundImage = 'url(images/0'+( this.index +1 )+'big.jpg)' }}这样就可以了。还有，你的doctype声明最好不要用严格模式了，这样很难调试直接<!DOCTYPE html><html>就够了。
随时随地看视频慕课网APP
相关分类
JavaScript