求解有关图片旋转的问题
在点击缩略图切换图片的时候，怎么把图片的方向也变回原样啊？求解....要兼容FF和IE啊
- HTML code
<!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><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script></head> <style>html, body, div, p, a { margin:0; padding:0}body { font:12px simsun, Arial, tahoma, Verdana, sans-serif;}:focus { outline:none}a:link, a:visited, a:hover { text-decoration:none}.rot0{-moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); transform:rotate(0deg); -o-transform: rotate(0deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0);}.rot1{-moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); transform:rotate(90deg); -o-transform: rotate(90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}.rot2{-moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg);-o-transform: rotate(180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);}.rot3{-moz-transform:rotate(270deg); -webkit-transform:rotate(270deg); transform:rotate(270deg); -o-transform: rotate(2700deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}.spic a img{-moz-opacity:0.5; filter:alpha(opacity=50);border:0px;}.spic a:hover{font-size:9px;}.spic a:hover img{-moz-opacity:0.5; filter:alpha(opacity=100);cursor:hand;}.borderimage{ border:10px solid black;}.shakeimage{ position:relative} .top { height:50px; width:100%; border-bottom:1px solid #ddd; position:absolute; top:0; left:0; text-align:right}.top img { margin:10px 15px 0 0}.left { width:100px; border-right:1px solid #ddd; position:absolute; top:51px; left:0; overflow-y:auto; bottom:0}.left img { margin:20px 0 0 10px;}.right { overflow:hidden; position:absolute; top:51px; left:101px; bottom:0; right:0; text-align:center; padding-top:20px}</style><META HTTP-EQUIV="imagetoolbar" CONTENT="no"> <style type="text/css"> body { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 12px; line-height: 180%; } td { font-size: 12px; line-height: 150%; } </style> <body><SCRIPT language=JavaScript> //switch imagefunction seeBig(_this) { document.images["imageshow"].src=_this.parentNode.getElementsByTagName("img")[0].src; document.images["imageshow"].height=_this.parentNode.getElementsByTagName("img")[0].height*8; document.images["imageshow"].width=_this.parentNode.getElementsByTagName("img")[0].width*8; $(function () { $("#block1").css("top", "0px"); $("#block1").css("left", "0px"); }) }//rotate&restore imagewindow.onload = function(){ //rotate image var param = { right: document.getElementById("rotRight"), left: document.getElementById("rotLeft"), real: document.getElementById("rotReal"), img: document.getElementById("images1"), rot: 0 }; var fun = { right: function(){ param.rot +=1; param.img.className = "rot"+param.rot; if(param.rot === 4){ param.rot = 0; } return false; }, left: function(){ param.rot -=1; if(param.rot === -1){ param.rot = 3; } param.img.className = "rot"+param.rot; return false; }, //restore image real: function(){ param.rot =0; param.img.className = "rot"+param.rot; document.images["imageshow"].height=(document.images["imageshow"].height/document.images["imageshow"].width)*document.images["imagehide"].width; document.images["imageshow"].width=document.images["imagehide"].width; document.getElementById("block1").style.top=0; document.getElementById("block1").style.left=0; bitemp = 0; $(function () { $("#block1").css("top", "0px"); $("#block1").css("left", "0px"); } ) return false; } }; param.right.onclick = function(){ fun.right(); }; param.left.onclick = function(){ fun.left(); }; param.real.onclick = function(){ fun.real(); }; };</script><!--按钮图标--><div class="top"> <a href="#"><input type="button" value="还原" id="rotReal" /></a><a href="#"><input type="button" value="向左转" id="rotLeft" /></a><a href="#"><input type="button" value="向右转" id="rotRight" /></a></div> <!--缩略图片层--><div class="left"> <span class="spic"> <a href="###" onclick="seeBig(this)" style="cursor:pointer"> <img border="0" src="http://pic10.nipic.com/20100926/2874022_122448725818_2.jpg" width="70" style="cursor:pointer;" alt=""/></a></span> <span class="spic"> <a href="###" onclick="seeBig(this)" style="cursor:pointer"> <img border="0" src="http://pic10.nipic.com/20100926/2874022_122448658627_2.jpg" width="70" style="cursor:pointer;" alt=""/></a></span></div><!--显示图片层--><div class="right"> <div algin="center" id='block1' style='z-index:0; left:0px; top:0px; width:0px; height:0px; position: relative;' class="dragAble"> <img name='imageshow' id="images1" class="shakeimage" width="560" src='http://pic10.nipic.com/20100926/2874022_122448725818_2.jpg' style="cursor:pointer; border: solid 5px white;" alt="" /> </div> </div></body> </html>
[解决办法]
- HTML code
<!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> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script></head><style> html, body, div, p, a { margin: 0; padding: 0; } body { font: 12px simsun, Arial, tahoma, Verdana, sans-serif; } :focus { outline: none; } a:link, a:visited, a:hover { text-decoration: none; } .rot0 { -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); -o-transform: rotate(0deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); } .rot1 { -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); -o-transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); } .rot2 { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); -o-transform: rotate(180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); } .rot3 { -moz-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg); -o-transform: rotate(2700deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } .spic a img { -moz-opacity: 0.5; filter: alpha(opacity=50); border: 0px; } .spic a:hover { font-size: 9px; } .spic a:hover img { -moz-opacity: 0.5; filter: alpha(opacity=100); cursor: hand; } .borderimage { border: 10px solid black; } .shakeimage { position: relative; } .top { height: 50px; width: 100%; border-bottom: 1px solid #ddd; position: absolute; top: 0; left: 0; text-align: right; } .top img { margin: 10px 15px 0 0; } .left { width: 100px; border-right: 1px solid #ddd; position: absolute; top: 51px; left: 0; overflow-y: auto; bottom: 0; } .left img { margin: 20px 0 0 10px; } .right { overflow: hidden; position: absolute; top: 51px; left: 101px; bottom: 0; right: 0; text-align: center; padding-top: 20px; }</style><meta http-equiv="imagetoolbar" content="no"><style type="text/css"> body { font-family: "Verdana" , "Arial" , "Helvetica" , "sans-serif"; font-size: 12px; line-height: 180%; } td { font-size: 12px; line-height: 150%; }</style><body> <script language="JavaScript"> //rotate&restore image window.onload = function () { //rotate image var param = { right: document.getElementById("rotRight"), left: document.getElementById("rotLeft"), real: document.getElementById("rotReal"), img: document.getElementById("images1"), rot: 0 }; var fun = { right: function () { param.rot += 1; param.img.className = "rot" + param.rot; if (param.rot === 4) { param.rot = 0; } return false; }, left: function () { param.rot -= 1; if (param.rot === -1) { param.rot = 3; } param.img.className = "rot" + param.rot; return false; }, //restore image real: function () { param.rot = 0; param.img.className = "rot" + param.rot; document.images["imageshow"].height = (document.images["imageshow"].height / document.images["imageshow"].width) * document.images["imagehide"].width; document.images["imageshow"].width = document.images["imagehide"].width; document.getElementById("block1").style.top = 0; document.getElementById("block1").style.left = 0; bitemp = 0; $(function () { $("#block1").css("top", "0px"); $("#block1").css("left", "0px"); } ) return false; } }; param.right.onclick = function () { fun.right(); }; param.left.onclick = function () { fun.left(); }; param.real.onclick = function () { fun.real(); }; }; //switch image function seeBig(_this) { var rot = 0; var img = document.getElementById("images1"); img.className = "rot" + rot; document.images["imageshow"].height = (document.images["imageshow"].height / document.images["imageshow"].width) * document.images["imagehide"].width; document.images["imageshow"].width = document.images["imagehide"].width; document.getElementById("block1").style.top = 0; document.getElementById("block1").style.left = 0; bitemp = 0; document.images["imageshow"].src = _this.parentNode.getElementsByTagName("img")[0].src; document.images["imageshow"].height = _this.parentNode.getElementsByTagName("img")[0].height * 8; document.images["imageshow"].width = _this.parentNode.getElementsByTagName("img")[0].width * 8; $(function () { $("#block1").css("top", "0px"); $("#block1").css("left", "0px"); }) } </script> <!--按钮图标--> <div class="top"> <a href="#"> <input type="button" value="还原" id="rotReal" /></a> <a href="#"> <input type="button" value="向左转" id="rotLeft" /></a> <a href="#"> <input type="button" value="向右转" id="rotRight" /></a> </div> <!--缩略图片层--> <div class="left"> <span class="spic"><a href="#" onclick="seeBig(this)" style="cursor: pointer"> <img border="0" src="http://pic10.nipic.com/20100926/2874022_122448725818_2.jpg" width="70" style="cursor: pointer;" alt="" /></a></span> <span class="spic"><a href="#" onclick="seeBig(this)" style="cursor: pointer"> <img border="0" src="http://pic10.nipic.com/20100926/2874022_122448658627_2.jpg" width="70" style="cursor: pointer;" alt="" /></a></span> </div> <!--显示图片层--> <div class="right"> <div algin="center" id='block1' style='z-index: 0; left: 0px; top: 0px; width: 0px; height: 0px; position: relative;' class="dragAble"> <img name='imageshow' id="images1" class="shakeimage" src='http://pic10.nipic.com/20100926/2874022_122448725818_2.jpg' style="cursor: pointer; border: solid 5px white; width: 560px;" alt="" /> </div> </div></body></html>