Copie o código do código da seguinte forma:
<!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">
<cabeça>
<title>Efeito de rotação de imagem</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--Adicione o seguinte código entre <head> e </head>-->
<style type="texto/css">
ul{preenchimento:0 15px;}
ul li{padding-bottom:15px;border-bottom:1px tracejado #EEE;}
.caption{preenchimento:15px 0 5px;}
.caption input{margin-right:10px;padding:0 10px;}
</estilo>
<script type="texto/javascript">
/*
*www.byzuo.com
*ok!: MSIE 6, 7, 8, Firefox 3.6, Chrome 4, Safari 4, Opera 10
* o Girar ID da foto;
* p seleciona o sentido de rotação, o valor fixo é 'esquerda' ou 'direita';
*/
função girar(o,p){
var img = document.getElementById(o);
if(!img || !p) retorna falso;
var n = img.getAttribute('passo');
se(n== nulo) n=0;
if(p=='certo'){
(n==3)?n=0:n++;
}else if(p=='esquerda'){
(n==0)?n=3:n--;
}
img.setAttribute('passo',n);
//MSIE
if(documento.todos) {
img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')';
//HACK PARA MSIE 8
mudar(n){
caso 0:
imgimg.parentNode.style.height = img.height;
quebrar;
caso 1:
imgimg.parentNode.style.height = img.largura;
quebrar;
caso 2:
imgimg.parentNode.style.height = img.height;
quebrar;
caso 3:
imgimg.parentNode.style.height = img.largura;
quebrar;
}
//DOM
}outro{
var c = document.getElementById('canvas_'+o);
se(c== nulo){
img.style.visibility = 'oculto';
img.style.position = 'absoluto';
c = document.createElement('canvas');
c.setAttribute("id",'canvas_'+o);
img.parentNode.appendChild(c);
}
var ccanvasContext = c.getContext('2d');
mudar(n) {
padrão :
caso 0:
c.setAttribute('largura', img.largura);
c.setAttribute('altura', img.altura);
canvasContext.rotate(0*Math.PI/180);
canvasContext.drawImage(img, 0, 0);
quebrar;
caso 1:
c.setAttribute('largura', img.altura);
c.setAttribute('altura', img.largura);
canvasContext.rotate(90*Math.PI/180);
canvasContext.drawImage(img, 0, -img.height);
quebrar;
caso 2:
c.setAttribute('largura', img.largura);
c.setAttribute('altura', img.altura);
canvasContext.rotate(180 * Math.PI/180);
canvasContext.drawImage(img, -img.largura, -img.altura);
quebrar;
caso 3:
c.setAttribute('largura', img.altura);
c.setAttribute('altura', img.largura);
canvasContext.rotate(270*Math.PI/180);
canvasContext.drawImage(img, -img.largura, 0);
quebrar;
}
}
}
</script>
</head>
<corpo>
<!--Adicione o seguinte código entre <body> e </body>-->
<ul>
<li>
<div>
<input type="button" value="virar à esquerda" onclick="rotate('pic_1','left')">
<input type="button" value="virar à direita" onclick="rotate('pic_1','right')">
</div>
<div>
<img id="pic_1" src="1.gif">
</div>
</li>
</ul>
</body>
</html>