图片旋转

    var rote=0;
var i=0;
//顺时针旋转
$(".pop_write .turn_right").click(function(){
var isIE = navigator.userAgent.toLowerCase().indexOf("msie") != -1;

if(isIE){
// for IE
i = (i+1)%4;
$(".pop_write .img_wp >img").css({filter:"progid:DXImageTransform.Microsoft.BasicImage(Rotation="+i+")"});

var he = $(".pop_write .img_wp >img").height();
var we = $(".pop_write .img_wp >img").width();

$(".pop_write .img_wp").css({width:we+"px",height:he+"px"});
$(".pop_write .img_del").css({left:le+"px"});
}else{
//for other
rote = rote+90;
var he = $(".pop_write .img_wp >img").height();
var we = $(".pop_write .img_wp >img").width();
var der = (rote/90)%4;
var translatY = -(he-we)/2;
var translatX = -Math.ceil((we-he)/2);
var attr = null;
var navgNick = navigator.userAgent.toLowerCase();

if(navgNick.indexOf("gecko") > 0){attr = "-moz-transform"};
if(navgNick.indexOf("presto") > 0) {attr = "-o-transform"};
if(navgNick.indexOf("webkit") > 0) {attr = "-webkit-transform"};

turnImg(der,attr,we,he,rote,translatY,translatX);
}
})

//逆时针旋转
$(".pop_write .turn_left").click(function(){
var isIE = navigator.userAgent.toLowerCase().indexOf("msie") != -1;
if(isIE){

i = i >0?(i-1)%4:(3-i)%4;
$(".pop_write .img_wp >img").css({filter:"progid:DXImageTransform.Microsoft.BasicImage(Rotation="+i+")"});

var he = $(".pop_write .img_wp >img").height();
var we = $(".pop_write .img_wp >img").width();

$(".pop_write .img_wp").css({width:we+"px",height:he+"px"});
$(".pop_write .img_del").css({left:le+"px"});

}else{
rote = rote-90;
var he = $(".pop_write .img_wp >img").height();
var we = $(".pop_write .img_wp >img").width();
var attr = null;
var navgNick = navigator.userAgent.toLowerCase();

if(navgNick.indexOf("gecko") > 0){attr = "-moz-transform"};
if(navgNick.indexOf("presto") > 0) {attr = "-o-transform"};
if(navgNick.indexOf("webkit") > 0) {attr = "-webkit-transform"};
if(!attr){return false;};

var der = (-rote/90)%4;
var translatY = (he-we)/2;
var translatX = Math.ceil((we-he)/2);

turnImg(der,attr,we,he,rote,translatY,translatX);
}
})

//图片旋转90度
function turnNine(attr,we,he,rote,translatY,translatX){
$(".pop_write .img_wp").css({width:he+"px",height:we+"px"});
$(".pop_write .img_wp >img").css(attr, "rotate("+rote+"deg)"+" "+"translate("+translatY+"px,"+(-translatX)+"px)");
}
//图片旋转180和360度
function turnLevel(attr,we,he,rote,translatY,translatX){
$(".pop_write .img_wp").css({width:we+"px",height:he+"px"});
$(".pop_write .img_wp >img").css(attr,"rotate("+rote+"deg)"+" "+"translate(0px,0px)");
}
//图片旋转270度
function turnSecd(attr,we,he,rote,translatY,translatX){
$(".pop_write .img_wp").css({width:he+"px",height:we+"px"});
$(".pop_write .img_wp >img").css(attr, "rotate("+rote+"deg)"+" "+"translate("+(-translatY)+"px,"+(translatX)+"px)");
}else{
$(".pop_write .img_wp >img").css(attr, "rotate("+rote+"deg)"+" "+"translate("+(-translatY)+"px,"+(0)+"px)");
}
//图片旋转
function turnImg(der,attr,we,he,rote,translatY,translatX){
switch(der){
case -3:
case 1:
turnNine(attr,we,he,rote,translatY,translatX);
break;
case -1:
case 3:
turnSecd(attr,we,he,rote,translatY,translatX)
break;
case -2:
case 0:
case 2:
turnLevel(attr,we,he,rote,translatY,translatX);
break;
}
}
<!-- 写点什么弹出 [-->
<div class="pop pop_write" style="width:700px;height:700px;text-align:center">
<div class="img_wp" style="display:inline-block;width:300px;height:300px;">
  <a class="turn_left" style="display:inline-block;background:red;margin-right:20px;">逆时针旋转</a><a class="turn_right" style="display:inline-block;background:red;">顺时针旋转</a>
  <img src="background.png" alt="" />
</div>
</div>
<!--] 写点什么弹出 -->




posted @ 2012-03-03 11:16  Scool.Miss  阅读(337)  评论(0编辑  收藏  举报