<div class="codetitle"> <span><a style="CURSOR: pointer" data="50164" class="copybut" id="copybut50164" onclick="doCopy('code50164')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code50164"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><head>画像の回転効果</title> ><meta http-equiv="content-type" content="text/html;charset=gb2312"> <br><!-- 次のコードを <head> と </head> の間に追加します。 --> <br><style type="text/css"> <br>ul{padding:0 15px;} <br>ul li{padding-bottom:15px;border-bottom:1px 破線 #EEE ;} <br>.caption{padding:15px 0 5px;} <br>.caption input{margin-right:10px;padding:0 10px;} <br></style> <br><script type= "text/javascript"> <br>/* <br>* www.byzuo.com <br>* ok!: MSIE 6、7、8、Firefox 3.6、chrome 4、Safari 4、Opera 10 <br>* o 画像 ID を回転します。 <br>* p 回転方向を選択します。固定値は 'left' または 'right' です。 <br>*/ <br>function roll(o,p){ <br> var img =ドキュメント .getElementById(o); <br> if(!img || !p) return false; <br> var n = img.getAttribute('step'); <br> if(n== null); ; <br> if(p=='right'){ <br> (n==3)? <br> }else if(p=='left'){ <br> (n = =0)? n=3:n--; <br> } <br> img.setAttribute('step',n); <br> //MSIE <br> if(document.all) { <br> img .style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' n ')' <br> .parentNode.style.height = img.height; <br> ケース 1: <br> imgimg.parentNode.style.height = img.width; <br> ケース 2: <br> imgimg.parentNode.style.height = img.height; <br> ケース 3: <br> imgimg.parentNode.style.height = img.width; <br> Break; <br> } <br> //DOM <br> }else{ <br> var c = document.getElementById('canvas_' o ); <br> if(c== null){ <br> img.style.visibility = 'hidden'; <br> img.style.position = 'absolute'; <br> c = document.createElement(' '); <br> c.setAttribute("id",'canvas_' o); <br> img.parentNode(c);<br> var ccanvasContext = c.getContext('2d'); <br> switch(n) { <br> デフォルト : <br> case 0 : <br> c.setAttribute('width', img.width); <br> c.setAttribute('height', img.height); <br> CanvasContext.rotate(0 * Math.PI / 180); <br> CanvasContext.drawImage(img, 0, 0); <br> 休憩。 <br> ケース 1 : <br> c.setAttribute('width', img.height); <br> c.setAttribute('height', img.width); <br> CanvasContext.rotate(90 * Math.PI / 180); <br> CanvasContext.drawImage(img, 0, -img.height); <br> 休憩。 <br> ケース 2 : <br> c.setAttribute('width', img.width); <br> c.setAttribute('height', img.height); <br> CanvasContext.rotate(180 * Math.PI / 180); <br> CanvasContext.drawImage(img, -img.width, -img.height); <br> 休憩。 <br> ケース 3 : <br> c.setAttribute('width', img.height); <br> c.setAttribute('height', img.width); <br> CanvasContext.rotate(270 * Math.PI / 180); <br> CanvasContext.drawImage(img, -img.width, 0); <br> 休憩。 <br> } <br> } <br>} <br></script> <br></head> <br> <br><!-- 以下の代コードを <body> と </body> の間に追加します --> <br><ul class="clearfix"> <br> <li> <br> <div class="caption"> <br> <input type="button" value="turn left" onclick="rotate('pic_1','left')"> <br> <input type="button" value="turn right" onclick="rotate('pic_1','right')"> <br> </div> <br> <div class="cont"> <br> <img alt="javascript 图片旋转效果" id="pic_1" src="1.gif" alt=""> <br> </div> <br> </li> <br> <br></body> <br></html><br> </div>
