<style>????
body,ul,li{margin:0;padding:0;}????
body{background:#000;}????
img{border:0;border-radius:3px;}????
ul{list-style-type:none;}????
#box{width:212px;border:5px?solid?#fff;overflow:hidden;zoom:1;background:#fff;border-radius:5px;margin:10px?auto;padding:0?0?3px?3px;}????
#box?li,#box?li?img{float:left;width:50px;height:50px;}????
#box?li{margin:3px?3px?0?0;}????
#box?li.first{position:relative;}????
#box?li.first,#box?li.first?img{width:156px;height:156px;}????
#box?li.first?div{position:absolute;top:0;left:0;width:156px;height:156px;display:none;opacity:0.5;filter:alpha(opacity=50);background:#fff?url(img/loading.gif)?50%?50%?no-repeat;}????
</style>????
<script?type="text/javascript">????
window.onload?=?function?()????
{????
var?oImg?=?document.getElementById("box").getElementsByTagName("img");????
var?oDiv?=?document.getElementsByTagName("div")[0];????
for?(var?i?=?1;?i?<?oImg.length;?i++)????
{????
oImg[i].onmouseover?=?function?()????
{
????
var?img?=?new?Image();????
img.src?=?oImg[0].src?=?this.src.replace(/small/,"big");????
oDiv.style.display?=?"block";????
img.complete???oDiv.style.display?=?"none"?:?(oImg[0].onload?=?function()?{oDiv.style.display?=?"none"})????
}
????
}????
};????
</script>????
</head>????
<body>????
<ul?id="box">????
<li?class="first"><img?src="img/big_1.jpg"><div></div></li>????
<li><a?href="javascript:;"><img?src="img/small_1.jpg"></a></li>????
<li><a?href="javascript:;"><img?src="img/small_2.jpg"></a></li>????
<li><a?href="javascript:;"><img?src="img/small_3.jpg"></a></li>????
<li><a?href="javascript:;"><img?src="img/small_4.jpg"></a></li>????
<li><a?href="javascript:;"><img?src="img/small_5.jpg"></a></li>????
<li><a?href="javascript:;"><img?src="img/small_6.jpg"></a></li>????
<li><a?href="javascript:;"><img?src="img/small_7.jpg"></a></li>????
<li><a?href="javascript:;"><img?src="img/small_8.jpg"></a></li>????
<li><a?href="javascript:;"><img?src="img/small_9.jpg"></a></li>????
<li><a?href="javascript:;"><img?src="img/small_10.jpg"></a></li>????
<li><a?href="javascript:;"><img?src="img/small_11.jpg"></a></li>????
</ul>????
</body>如上述，img.complete???oDiv.style.display?=?"none"?:?(oImg[0].onload?=?function()?{oDiv.style.display?=?"none"})這句不太懂，另外圖片比較小，是否真的有判斷加載的必要？
img的complete方法
刺槐少女
2018-03-28 15:43:48