次のようにコードをコピーします。
<!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> の間に次のコードを追加します -->
<style type="text/css">
ul{パディング:0 15px;}
ul li{padding-bottom:15px;border-bottom:1px 破線 #EEE;}
.caption{パディング:15px 0 5px;}
.caption input{margin-right:10px;padding:0 10px;}
</スタイル>
<script type="text/javascript">
/*
* 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=='left'){
(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;
壊す;
}
//DOM
}それ以外{
var c = document.getElementById('canvas_'+o);
if(c== null){
img.style.visibility = '非表示';
img.style.position = '絶対';
c = document.createElement('canvas');
c.setAttribute("id",'canvas_'+o);
img.parentNode.appendChild(c);
}
var ccanvasContext = c.getContext('2d');
スイッチ(n) {
デフォルト ：
ケース0:
c.setAttribute('width', img.width);
c.setAttribute('height', img.height);
CanvasContext.rotate(0 * Math.PI / 180);
CanvasContext.drawImage(img, 0, 0);
壊す;
ケース1:
c.setAttribute('width', img.height);
c.setAttribute('height', img.width);
CanvasContext.rotate(90 * Math.PI / 180);
CanvasContext.drawImage(img, 0, -img.height);
壊す;
ケース 2:
c.setAttribute('width', img.width);
c.setAttribute('height', img.height);
CanvasContext.rotate(180 * Math.PI / 180);
CanvasContext.drawImage(img, -img.width, -img.height);
壊す;
ケース 3:
c.setAttribute('width', img.height);
c.setAttribute('height', img.width);
CanvasContext.rotate(270 * Math.PI / 180);
CanvasContext.drawImage(img, -img.width, 0);
壊す;
}
}
}
</script>
</head>
<本文>
<!--<body> と </body> の間に次のコードを追加します -->
<ul>
<リ>
<div>
<input type="button" value="turn left" 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>