移动到div元素里图片显示

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

#top{width:510px;height:510px;background: #ccc;position: relative;}

#top div{width:50px;height:50px;background: red;position:absolute;background:url(images/pic.jpg) no-repeat;

display: none;}

</style>

</head>

<body>

</div>

window.onload=function(){

var top=document.getElementById('top');

var div=top.getElementsByTagName('div');

for(var i=0;i<100;i++){

top.innerHTML+='<div>'+i+'</div>';

div[i].style.left=i*51 - parseInt(i/10)*510 +'px';

div[i].style.top=parseInt(i/10)*51 + 'px';

div[i].style.backgroundPositionX=0-i*50+parseInt(i/10)*500+'px';

div[i].style.backgroundPositionY=0-parseInt(i/10)*50 +'px';

};//for 循环

for(var i=0;i<div.length;i++){

div[i].onmouseover=function(){

this.style.display='block';

};//移到div显示图片

};//for循环

};//总执行

</script>

</body>

</html>

效果是100个div先全部隐藏。然后鼠标移到哪一个div上，那个div就显示出来

358886979

浏览 1062回答 1