求解有关图片旋转的问题

在点击缩略图切换图片的时候，怎么把图片的方向也变回原样啊？求解....要兼容FF和IE啊
<!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 image
function 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 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();
};
};</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>

解决方案 »

  1.   

    document.images["imagehide"].width
    你这个我没发现啊
      

  2.   

    <!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>类似不过你的代码在ie9下测试的时候提示width未定义。。（document.images["imageshow"].height = (document.images["imageshow"].height / document.images["imageshow"].width) * document.images["imagehide"].width;
    ）