Скопируйте код кода следующим образом:
<!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{padding:0 15px;}
ul li{padding-bottom:15px;border-bottom:1px пунктирный #EEE;}
.caption{padding:15px 0 5px;}
.caption input{margin-right:10px;padding:0 10px;}
</стиль>
<тип сценария="текст/javascript">
/*
* www.byzuo.com
* ок!: MSIE 6, 7, 8, Firefox 3.6, Chrome 4, Safari 4, Opera 10.
* o Поворот изображения ID;
* p выбирает направление вращения, фиксированное значение — «влево» или «вправо»;
*/
функция Rotate(o,p){
вар img = document.getElementById(o);
if(!img || !p) возвращает false;
var n = img.getAttribute('шаг');
если (п == ноль) п = 0;
если(p=='право'){
(n==3) n=0:n++;
}иначе if(p=='left'){
(n==0) n=3:n--;
}
img.setAttribute('шаг',n);
//MSIE
если(документ.все) {
img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')';
//ХАК ДЛЯ MSIE 8
переключатель (п) {
случай 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);
если (с == ноль) {
img.style.visibility = 'скрытый';
img.style.position = 'абсолютный';
c = document.createElement('холст');
c.setAttribute("id",'canvas_'+o);
img.parentNode.appendChild(c);
}
вар ccanvasContext = c.getContext('2d');
переключатель (п) {
по умолчанию :
случай 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);
перерыв;
}
}
}
</скрипт>
</голова>
<тело>
<!--Добавьте следующий код между <body> и </body>-->
<ул>
<ли>
<дел>
<input type="button" value="повернуть налево" onclick="rotate('pic_1','left')">
<input type="button" value="поверните направо" onclick="rotate('pic_1','right')">
</div>
<дел>
<img id="pic_1" src="1.gif">
</div>
</li>
</ul>
</тело>
</html>