文章摘自“鑫空间”
------------------------------------------------------------------------------------------------------
1、用CSS3加JS,点击文字使图片转90度(忽略低版本的浏览器)
<style type="text/css">
.rot_box{width:512px; margin:0 auto;}
.image_box{height:512px; text-align:center;}
.rot1{-moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); transform:rotate(90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
.rot2{-moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);}
.rot3{-moz-transform:rotate(270deg); -webkit-transform:rotate(270deg); transform:rotate(270deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
</style>
<script type="text/javascript">
window.onload = function(){
var param = {
right: document.getElementById("rotRight"),
left: document.getElementById("rotLeft"),
img: document.getElementById("rotImg"),
rot: 0
};
var fun = {
right: function(){
param.rot +=1;
param.img.className = "rot"+param.rot;
if(param.rot === 3){
param.rot = -1;
}
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="rot_box">
<p><a id="rotLeft" class="l" href="javascript:void(0);"><<向左转</a><a id="rotRight" class="r" href="javascript:void(0);">向右转>></a></p>
<div class="image_box">
<img id="rotImg" src="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" />
</div>
</div>
2、用JQ,点击文字使图片转90度(IE下有时不正常)
<style type="text/css">
.rot_box{width:512px; margin:0 auto;}
.image_box{text-align:center;}
</style>
<script type="text/javascript" src="../js/jquery-1.82.js"></script>
<script type="text/javascript" src="../js/jquery.rotate.js"></script>
<script type="text/javascript">
$(function(){
var param = {
right: $("#rotRight"),
left: $("#rotLeft"),
box: $("#imgBox"),
rot: 0
};
var fun = {
right: function(){
param.rot += 90;
$("#rotImg").rotate(param.rot);
if(param.rot === 270){
param.rot = -90;
}
return false;
},
left: function(){
param.rot -= 90;
if(param.rot === -90){
param.rot = 270;
}
$("#rotImg").rotate(param.rot);
return false;
}
};
param.right.click(function(){
if(!$("img#rotImg").length){
param.box.html('<img id="rotImg" src="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" />');
}
fun.right();
return false;
});
param.left.click(function(){
if(!$("img#rotImg").length){
param.box.html('<img id="rotImg" src="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" />');
}
fun.left();
return false;
});
});
</script>
<div class="rot_box">
<p><a id="rotLeft" class="l" href="javascript:void(0);"><<向左转</a><a id="rotRight" class="r" href="javascript:void(0);">向右转>></a></p>
<div class="image_box">
<img id="rotImg" src="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" />
</div>
</div>
其中jquery.rotate.js的内容:
jQuery.fn.rotate = function(angle,whence) {
var p = this.get(0);
// we store the angle inside the image tag for persistence
if (!whence) {
p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;
} else {
p.angle = angle;
}
if (p.angle >= 0) {
var rotation = Math.PI * p.angle / 180;
} else {
var rotation = Math.PI * (360+p.angle) / 180;
}
var costheta = Math.round(Math.cos(rotation) * 1000) / 1000;
var sintheta = Math.round(Math.sin(rotation) * 1000) / 1000;
//alert(costheta+","+sintheta);
if (document.all && !window.opera) {
var canvas = document.createElement('img');
canvas.src = p.src;
canvas.height = p.height;
canvas.width = p.width;
canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')";
} else {
var canvas = document.createElement('canvas');
if (!p.oImage) {
canvas.oImage = new Image();
canvas.oImage.src = p.src;
} else {
canvas.oImage = p.oImage;
}
canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height);
canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width);
var context = canvas.getContext('2d');
context.save();
if (rotation <= Math.PI/2) {
context.translate(sintheta*canvas.oImage.height,0);
} else if (rotation <= Math.PI) {
context.translate(canvas.width,-costheta*canvas.oImage.height);
} else if (rotation <= 1.5*Math.PI) {
context.translate(-costheta*canvas.oImage.width,canvas.height);
} else {
context.translate(0,-sintheta*canvas.oImage.width);
}
context.rotate(rotation);
context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height);
context.restore();
}
canvas.id = p.id;
canvas.angle = p.angle;
p.parentNode.replaceChild(canvas, p);
}
jQuery.fn.rotateRight = function(angle) {
this.rotate(angle==undefined?90:angle);
}
jQuery.fn.rotateLeft = function(angle) {
this.rotate(angle==undefined?-90:-angle);
}
3、用canvas标签,点击文字使图片转90度(IE不支持,但调用一个Google开发的插件excanvas.js就好)
<style type="text/css">
.rot_box{width:512px; margin:0 auto;}
.image_box{text-align:center;}
.image_box img{margin-top:-150px;}
</style>
<!--[if IE]><script type="text/javascript" src="../js/excanvas.js"></script><![endif]-->
<script type="text/javascript">
window.onload = function(){
var param = {
right: document.getElementById("rotRight"),
left: document.getElementById("rotLeft"),
img: document.getElementById("rotImg"),
cv: document.getElementById("canvas"),
rot: 0
};
var rotate = function(canvas,img,rot){
//获取图片的高宽
var w = img.width;
var h = img.height;
//角度转为弧度
if(!rot){
rot = 0;
}
var rotation = Math.PI * rot / 180;
var c = Math.round(Math.cos(rotation) * 1000) / 1000;
var s = Math.round(Math.sin(rotation) * 1000) / 1000;
//旋转后canvas标签的大小
canvas.height = Math.abs(c*h) + Math.abs(s*w);
canvas.width = Math.abs(c*w) + Math.abs(s*h);
//绘图开始
var context = canvas.getContext("2d");
context.save();
//改变中心点
if (rotation <= Math.PI/2) {
context.translate(s*h,0);
} else if (rotation <= Math.PI) {
context.translate(canvas.width,-c*h);
} else if (rotation <= 1.5*Math.PI) {
context.translate(-c*w,canvas.height);
} else {
context.translate(0,-s*w);
}
//旋转90°
context.rotate(rotation);
//绘制
context.drawImage(img, 0, 0, w, h);
context.restore();
img.style.display = "none";
}
var fun = {
right: function(){
param.rot += 90;
rotate(param.cv, param.img, param.rot);
if(param.rot === 270){
param.rot = -90;
}
},
left: function(){
param.rot -= 90;
if(param.rot === -90){
param.rot = 270;
}
rotate(param.cv, param.img, param.rot);
}
};
param.right.onclick = function(){
fun.right();
return false;
};
param.left.onclick = function(){
fun.left();
return false;
};
};
</script>
<div class="rot_box">
<p><a id="rotLeft" class="l" href="javascript:void(0);"><<向左转</a><a id="rotRight" class="r" href="javascript:void(0);">向右转>></a></p>
<div class="image_box">
<img id="rotImg" src="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" />
</div>
</div>
插件可以在“鑫空间”下载http://www.zhangxinxu.com/study/js/excanvas.js