 |
ความคิดเห็นที่ 4 |
ต้องถามห้อง tech/developer ครับ
แต่ถ้าเขียนโปรแกรมเป็น จะอธิบายคร่าว ๆ ดังนี้
1. รูปบนที่เห็นเรียกว่า sprite ซึ่งมีรูปเดียว เพื่อให้มีการโหลดครั้งเดียว
จะเร็วกว่าโหลดที่ละรูป ซึ่งจะเห็นได้ว่ามีเกือบร้อยรูปเลย
2. เมื่อโหลดรูปมาแล้วก็ใช้ stylesheet crop ให้เหลือพื้นที่ต้องการ
เช่นรูปฉากหลัง กำหนดแบบนี้
<style>
#bg {
background: transparent url(sprite.png) no-repeat -322px -2px;
width: 464px;
height: 136px;
}
</style>
<div id="bg"></div>
-322px คือระยะ left
-2px คือระยะ top
ใน <div id="bg"> ก็จะปรากฎรูปฉากหลัง
3. การทำอนิเมาชั่น ก็ใช้วิธีสลับรูปเอาโดยการเปลี่ยนตำแหน่งระยะ left หรือ top ไป
ลอง copy ไฟล์นี้ไปสร้าง html แล้วโหลดรูปจากกระทู้นี้ไปวางไว้ที่เดียวกัน ตั้งชื่อเป็น sprite.png ดูนะครับ
<!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">
<head>
<title> new document </title>
<style>
#bg {
background: red url(sprite.png) no-repeat -322px -2px;
width: 464px;
height: 136px;
}
#pc {
background: red url(sprite.png) no-repeat -2px -242px;
width: 16px;
height: 16px;
}
</style>
<script>
function doAnimate(frame) {
var o = document.getElementById('pc');
o.style.backgroundPosition = '-' + (frame*20+2) + 'px -242px';
frame = (frame + 1 ) % 12;
setTimeout('doAnimate('+frame+')', 500);
}
</script>
</head>
<body>
<div id="bg"></div>
<div id="pc"></div>
<script>doAnimate(0)</script>
</body>
</html>
| จากคุณ |
:
sak (saknarak) 
|
| เขียนเมื่อ |
:
22 พ.ค. 53 14:41:18
|
|
|
|
|
