自己写的,不是很好
- <!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" xml:lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
- <title></title>
- <style type="text/css">
- .small{
- width:150px;
- height:150px;
- text-align:center;
- border:1px solid #ccc;
- border-radius:3px;
- background-color:#F4F4F4;
- margin:0 auto;
- }
- .big{
- width:auto;
- height:auto;
- text-align:center;
- border:1px solid #ccc;
- border-radius:3px;
- background-color:#F4F4F4;
- max-width:560px;
- }
- .show_s{
- cursor: url("http://cdn.wolonge.com/upload/big.cur"), pointer;
- padding:15px 0;
- }
- .show_b{
- padding:15px 0;
- cursor: url("http://cdn.wolonge.com/upload/small.cur"), pointer;
- }
- #hid{
- height:30px;
- line-height:30px;
- text-align:left;
- padding-left:30px;
- }
- #hid a{
- text-decoration:none;
- }
- </style>
- <script type="text/javascript">
- function showbig(){
- var b_div = document.getElementById("out");
- var b_img = document.getElementById("c_img");
- var info = document.getElementById("hid");
- b_img.style.maxWidth="520px";
- b_img.style.maxHeight="none";
- b_img.className = b_img.className+" show_b";
- b_div.className = b_div.className+" big";
- if(!+"\v1"){
- b_img.setAttribute("onclick",function (){showsmall()});
- }else{
- b_img.setAttribute("onclick","showsmall()");
- }
- info.style.display="block";
- };
- function showsmall(){
- var b_div = document.getElementById("out");
- var b_img = document.getElementById("c_img");
- var info = document.getElementById("hid");
- b_img.style.maxWidth="120px";
- b_img.style.maxHeight="120px";
- b_img.className ="show_s";
- b_div.className ="small";
- if(!+"\v1"){
- b_img.setAttribute("onclick",function (){showbig()});
- }else{
- b_img.setAttribute("onclick","showbig()");
- }
- info.style.display="none";
- };
- </script>
- </head>
- <body>
- <div id="out" class="small">
- <p id="hid" style="display:none">
- <a href="void(0)"< /span> onclick="showsmall()">收起</a>
- <a href="goods_1365401246.jpg" target="_blank">查看大图</a>
- </p>
- <img id="c_img" src="goods_1365401246.jpg" style="max-width: 120px; max-height: 120px;" onclick="showbig()" class="show_s" alt="" />
- </div>
- </body>
- </html>