다음과 같이 코드 코드를 복사합니다.
<!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">
<머리>
<title>사진 회전 효과</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--<head>와 </head> 사이에 다음 코드를 추가하세요-->
<스타일 유형="텍스트/css">
ul{패딩:0 15px;}
ul li{padding-bottom:15px;border-bottom:1px dashed #EEE;}
.caption{패딩:15px 0 5px;}
.caption 입력{margin-right:10px;padding:0 10px;}
</style>
<스크립트 유형="텍스트/자바스크립트">
/*
* www.byzuo.com
* ok!: MSIE 6, 7, 8, Firefox 3.6, Chrome 4, Safari 4, Opera 10
* o 사진 ID를 회전합니다.
* p는 회전 방향을 선택하며 고정 값은 '왼쪽' 또는 '오른쪽'입니다.
*/
함수 회전(o,p){
var img = document.getElementById(o);
if(!img || !p) false를 반환합니다.
var n = img.getAttribute('단계');
if(n== null) n=0;
if(p=='맞습니다'){
(n==3)?n=0:n++;
}else if(p=='왼쪽'){
(n==0)?n=3:n--;
}
img.setAttribute('단계',n);
//MSIE
if(document.all) {
img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')';
//MSIE 8 해킹
스위치(n){
사례 0:
imgimg.parentNode.style.height = img.height;
부서지다;
사례 1:
imgimg.parentNode.style.height = img.width;
부서지다;
사례 2:
imgimg.parentNode.style.height = img.height;
부서지다;
사례 3:
imgimg.parentNode.style.height = img.width;
부서지다;
}
//돔
}또 다른{
var c = document.getElementById('canvas_'+o);
if(c== 널){
img.style.visibility = '숨김';
img.style.position = '절대';
c = document.createElement('캔버스');
c.setAttribute("id",'canvas_'+o);
img.parentNode.appendChild(c);
}
var ccanvasContext = c.getContext('2d');
스위치(n) {
기본 :
사례 0 :
c.setAttribute('너비', img.width);
c.setAttribute('높이', img.height);
canvasContext.rotate(0 * Math.PI / 180);
canvasContext.drawImage(img, 0, 0);
부서지다;
사례 1:
c.setAttribute('너비', img.height);
c.setAttribute('높이', img.width);
canvasContext.rotate(90 * Math.PI / 180);
canvasContext.drawImage(img, 0, -img.height);
부서지다;
사례 2:
c.setAttribute('너비', img.width);
c.setAttribute('높이', img.height);
canvasContext.rotate(180 * Math.PI / 180);
canvasContext.drawImage(img, -img.width, -img.height);
부서지다;
사례 3:
c.setAttribute('너비', img.height);
c.setAttribute('높이', img.width);
canvasContext.rotate(270 * Math.PI / 180);
canvasContext.drawImage(img, -img.width, 0);
부서지다;
}
}
}
</script>
</head>
<본문>
<!--<body>와 </body> 사이에 다음 코드를 추가하세요-->
<ul>
<리>
<div>
<input type="button" value="좌회전" onclick="rotate('pic_1','left')">
<input type="button" value="우회전" onclick="rotate('pic_1','right')">
</div>
<div>
<img id="pic_1" src="1.gif">
</div>
</li>
</ul>
</body>
</html>