标签：
当鼠标移动到小图片上时，小图片显示红色边框并在上面大图片显示相应大图片，效果如图：
<!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> <style type="text/css"> #div{width:500px;height:500px;border:1px solid #fff ;margin:auto;background:#fff} li{list-style:none;float:left;margin-top:-15px;margin-left:50px} </style> </head> <body> <div id="div"> <div style="width:350px;height:262px;border:1px solid #fff ;margin: auto;"> <img src="images/show1_big.jpg" width="349" height="262" /> </div> <div style="width:500px;height:50px;border:1px solid #fff ;margin-top:180px"> <!--ul开始--> <ul> <li><img src="images/show1.jpg" width="53" height="46" onmouseover="change()"/> </li> <li><img onmouseover="change1()" src="images/show2.jpg" width="53" height="46" /> </li> <li><img src="images/show3.jpg" width="53" height="46" onmouseover="change2()"/> </li> <li><img src="images/show4.jpg" width="53" height="46" onmouseover="change3()" /> </li> </ul> <!--ul结束--> </div> </div> </body> <script type="text/javascript"> //定义 function kuang(){ var getli=document.getElementsByName("li"); for(var i=0;i<getli.length;i++){ } } //定义替换图片方法 function change(){ var imgs=document.getElementsByTagName("img"); imgs[0].setAttribute("src","images/show1_big.jpg"); imgs.style.width="border:1px solid red"; } //定义替换图片方法 function change1(){ var imgs=document.getElementsByTagName("img"); imgs[0].setAttribute("src","images/show2_big.jpg"); } //定义替换图片方法 function change2(){ var imgs=document.getElementsByTagName("img"); imgs[0].setAttribute("src","images/show3_big.jpg"); } //定义替换图片方法 function change3(){ var imgs=document.getElementsByTagName("img"); imgs[0].setAttribute("src","images/show4_big.jpg"); } </script> </html>
标签：
原文地址：http://www.cnblogs.com/wlx520/p/4500234.html
