求解有关图片旋转的有关问题-JavaSript-爱易网页

求解有关图片旋转的有关问题

日期：2014-05-16　浏览次数：20471 次

求解有关图片旋转的问题
在点击缩略图切换图片的时候，怎么把图片的方向也变回原样啊？求解....要兼容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 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;
        },

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

求解有关图片旋转的有关问题

相关资料更多>

推荐阅读更多>