[读码时间] mouseover小图显示对应大图
说明：代码来自网络。注释为笔者学习时添加。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>鼠标移过，改变图片路径</title> <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> window.onload = function () { var oImg = document.getElementById("box").getElementsByTagName("img");//链式调用，获取所有img var oDiv = document.getElementsByTagName("div")[0]; for (var i = 1; i < oImg.length; i++) { oImg[i].onmouseover = function () { //添加mouseover事件 var img = new Image(); //new一个新对象 img.src = oImg[0].src = this.src.replace(/small/, "big");//调用replace更改图片名称并赋值 oDiv.style.display = "block"; img.complete ? oDiv.style.display = "none" : (oImg[0].onload = function () { oDiv.style.display = "none" }); } } }; </script> </head> <body> <!--ul无序列表，每个li包裹一个a和img--> <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> </html>
