说明:代码来自网络。注释为笔者学习时添加。
<!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");//链式调用,获取所有imgvar 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>