选择三张图片进行堆叠,当鼠标移动到某张图片的露出部分上,如果该张图片不处于顶层,则将它显示在顶层。

 

  1. <html> 
  2.   <head> 
  3.   <title> 图片堆叠 </title> 
  4.     <script type="text/javascript"> 
  5.         var topimgid="img3"
  6.         function change(o) { 
  7.             document.getElementById(topimgid).style.zIndex="0"
  8.             o.style.zIndex = "10"
  9.             topimgid = o.id; 
  10.         } 
  11.     </script> 
  12.     <style type="text/css"> 
  13.         .img1 { 
  14.             position:absolute; 
  15.             top:10px; 
  16.             left:10px; 
  17.             width:700px; 
  18.             height:437px; 
  19.         } 
  20.         .img2 { 
  21.             position:absolute; 
  22.             top:210px; 
  23.             left:210px; 
  24.             width:700px; 
  25.             height:437px; 
  26.         } 
  27.         .img3 { 
  28.             position:absolute; 
  29.             top:410px; 
  30.             left:410px; 
  31.             width:700px; 
  32.             height:437px; 
  33.         }         
  34.     </style> 
  35.   </head> 
  36.   <body> 
  37.     <img id="img1" alt="图片1" src="img1.jpg" class="img1" onclick="change(this)" /> 
  38.     <img id="img2" alt="图片2" src="img2.jpg" class="img2" onclick="change(this)"  /> 
  39.     <img id="img3" alt="图片3" src="img3.jpg" class="img3" onclick="change(this)"  /> 
  40.   </body> 
  41. </html> 

效果如下图: