自己写的，不是很好

 

 
  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
  5.     <title></title> 
  6.     <style type="text/css"> 
  7.         .small{ 
  8.             width:150px; 
  9.             height:150px; 
  10.             text-align:center; 
  11.             border:1px solid #ccc; 
  12.             border-radius:3px; 
  13.             background-color:#F4F4F4; 
  14.             margin:0 auto; 
  15.         } 
  16.         .big{ 
  17.             width:auto; 
  18.             height:auto; 
  19.             text-align:center; 
  20.             border:1px solid #ccc; 
  21.             border-radius:3px; 
  22.             background-color:#F4F4F4; 
  23.             max-width:560px; 
  24.         } 
  25.         .show_s{ 
  26.             cursor: url("http://cdn.wolonge.com/upload/big.cur"), pointer; 
  27.             padding:15px 0;  
  28.         } 
  29.         .show_b{ 
  30.             padding:15px 0; 
  31.             cursor: url("http://cdn.wolonge.com/upload/small.cur"), pointer; 
  32.         } 
  33.         #hid{ 
  34.             height:30px; 
  35.             line-height:30px; 
  36.             text-align:left; 
  37.             padding-left:30px; 
  38.         } 
  39.         #hid a{ 
  40.             text-decoration:none; 
  41.         } 
  42.     </style> 
  43.     <script type="text/javascript"> 
  44.          
  45.         function showbig(){ 
  46.             var b_div = document.getElementById("out"); 
  47.             var b_img = document.getElementById("c_img"); 
  48.             var info = document.getElementById("hid"); 
  49.             b_img.style.maxWidth="520px"; 
  50.             b_img.style.maxHeight="none"; 
  51.             b_img.className = b_img.className+" show_b"; 
  52.             b_div.className = b_div.className+" big"; 
  53.             if(!+"\v1"){ 
  54.                 b_img.setAttribute("onclick",function (){showsmall()}); 
  55.             }else{ 
  56.                 b_img.setAttribute("onclick","showsmall()"); 
  57.             } 
  58.             info.style.display="block"; 
  59.         }; 
  60.         function showsmall(){ 
  61.             var b_div = document.getElementById("out"); 
  62.             var b_img = document.getElementById("c_img"); 
  63.             var info = document.getElementById("hid"); 
  64.             b_img.style.maxWidth="120px"; 
  65.             b_img.style.maxHeight="120px"; 
  66.             b_img.className ="show_s"; 
  67.             b_div.className ="small"; 
  68.             if(!+"\v1"){ 
  69.                 b_img.setAttribute("onclick",function (){showbig()}); 
  70.             }else{ 
  71.                 b_img.setAttribute("onclick","showbig()"); 
  72.             } 
  73.             info.style.display="none"; 
  74.         }; 
  75.     </script> 
  76. </head> 
  77. <body> 
  78.     <div id="out" class="small"> 
  79.     <p id="hid" style="display:none"> 
  80.         <a href="void(0)"< /span> onclick="showsmall()">收起</a> 
  81.         <a href="goods_1365401246.jpg" target="_blank">查看大图</a> 
  82.     </p> 
  83.         <img id="c_img" src="goods_1365401246.jpg" style="max-width: 120px; max-height: 120px;" onclick="showbig()" class="show_s" alt="" /> 
  84.     </div> 
  85. </body> 
  86. </html>