怎么用JS达到 切换已旋转图片时同时修正旋转方向
日期：2014-05-16 浏览次数：20342 次
如何用JS达到 切换已旋转图片时同时修正旋转方向
下面代码
应该如何修改 使得图片切换时，还原旋转方向为默认方向（未旋转）
小弟刚学JS..各位大大帮帮忙了
下面代码
应该如何修改 使得图片切换时，还原旋转方向为默认方向（未旋转）
小弟刚学JS..各位大大帮帮忙了
- 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>
.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;}
.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>
<body>
<SCRIPT language=JavaScript>
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;
}
window.onload = function(){
//rotate image
var param = {
right: document.getElementById("rotRight"),
left: document.getElementById("rotLeft"),
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;
},
};
param.right.onclick = function(){
fun.right();
};
param.left.onclick = function(){
fun.left();
};
};
</script>
<div class="top">
<input type="button" value="向左转" id="rotLeft" />
<input type="button" value="向右转" id="rotRight" />
</div>
<div class="left">
<span class="spic">
<a href="###" onclick="seeBig(this)" style="cursor:pointer">
<img border="0" src="./images/a/a1.jpg" width="70" onload="return imgzoom(this,600);" style="cursor:pointer;" alt=""/></a></span>
<span cl
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
