前端設計中的一些特效任意旋轉圖片的js實例發布者：本站 時間：2020-05-16 08:05:36
任意旋轉圖片的js實例
Html代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>任意旋轉圖片</title>
<script type="text/javascript" src="coos.ui.rotate.js"></script>
</head>
<body>
<div id="inner"><img id="theimage" border="0" src="logo.jpg"/></div>
<div style="position:absolute;top:235px;height:40px;">
<input type="button" value="<-Rotate逆時針" name="RotateL" id="RotateL" onclick="rotateRight('theimage',90);">
<input type="button" value="順時針Rotate->" name="RotateR" id="RotateR" onclick="rotateLeft('theimage',90);">
<input type="button" value="順時針270" name="RotateR" id="RotateR" onclick="rotateLeft('theimage',270);">
</div>
</body>
</html>
Js代碼
function rotate(id,angle,whence){
var p=document.getElementById(id);
//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.cos(rotation);
var sintheta=Math.sin(rotation);
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);
}
function rotateRight(id,angle){
rotate(id,angle==undefined?90:angle);
}
function rotateLeft(id,angle){
rotate(id,angle==undefined?-90:-angle);
}
選擇我們，優質服務，不容錯過
1. 優秀的網絡資源，強大的網站優化技術，穩定的網站和速度保證
2. 15年上海網站建設經驗，優秀的技術和設計水平，更放心
3. 全程省心服務，不必擔心自己不懂網絡，更省心。
------------------------------------------------------------
24小時聯系電話：021-58370032