คัดลอกรหัสรหัสดังต่อไปนี้:
<!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
* ตกลง!: 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) กลับเท็จ;
var n = img.getAttribute('ขั้นตอน');
ถ้า(n== โมฆะ) n=0;
ถ้า(p=='ขวา'){
(n==3)? n=0:n++;
} อื่น ๆ if(p=='left'){
(n==0)? n=3:n--;
-
img.setAttribute('ขั้นตอน',n);
//เอ็มซี่
ถ้า (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);
ถ้า(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);
หยุดพัก;
-
-
-
</สคริปต์>
</หัว>
<ร่างกาย>
<!--เพิ่มโค้ดต่อไปนี้ระหว่าง <body> และ </body>-->
<ul>
<li>
<div>
<input type="button" value="เลี้ยวซ้าย" onclick="rotate('pic_1','left')">
<input type="button" value="turn right" onclick="rotate('pic_1','right')">
</div>
<div>
<img id="pic_1" src="1.gif">
</div>
</li>
</ul>
</ร่างกาย>
</html>