:: How to Build ::
- การวางเลเยอร์ มีโค้ดแบบนี้ครับ ถ้าคุณจะปรับปรุงโดยการใส่ภาพหรืออะไรลงไป
ก็ทำได้โดยการใส่ในช่วง <DIV>...</DIV>
สิ่งสำคัญก็คือ คุณต้องรู้ขนาดความกว้างและความสูงของ
ภาพนั้น จะได้กำหนดขนาดของเลเยอร์ได้พอดีกับภาพครับ
<![CDATA[
<DIV ID="layer1" STYLE="position:absolute;
left:50px; top:100px;
width:30px; height:30px;
clip:rect(0px 30px 30px 0px);
background-color:red;
layer-background-color:red;">
</DIV>
]]>
- ในส่วนสคริปต์ (ใน <HEAD>) จะต้องมีการตรวจสอบเบราเซอร์ก่อน เพราะแต่ละบราวเซอร์มีวิธีเขียนไม่เหมือนกัน
<![CDATA[
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
]]>
- ประกาศฟังก์ชั่น moveBy() เอาไว้เลื่อนเลเยอร์ ผมประกาศแบบรับ obj เป็นชื่อเลเยอร์ครับ
<![CDATA[
function moveBy(obj,x,y) {
if (ns4) {
document.layers[obj].left = parseInt(document.layers[obj].left)+x;
document.layers[obj].top = parseInt(document.layers[obj].top)+y;
}
if (ie4) {
document.all[obj].style.left = parseInt(document.all[obj].style.left)+x;
document.all[obj].style.top = parseInt(document.all[obj].style.top)+y;
}
}
]]>
- ส่วนการทำงานในฟังก์ชั่นหลัก จะมี 2 ฟังก์ชั่นคือ Checkpos() มีหน้าที่ตรวจสอบตำแหน่งว่า
ขณะนี้เลเยอร์ชนขอบหรือยัง ถ้าชน ให้กำหนดทิศทางใหม่ไปทางตรงกันข้าม
ส่วน window.innerWidthและ window.innerHeightเป็นพรอเพอร์ตีที่ใช้ตรวจสอบขนาดของพื้นที่ใช้งานในหน้าจอ
สำหรับผู้ใช้ Netscape ส่วนใน Internet Explorer จะใช้ window.document.body.offsetWidth และ
window.document.body.offsetHeight ส่วนฟังก์ชั่น moveit()
จะไปเรียกฟังก์ชั่น Checkpos() เพื่อกำหนดทิศทางก่อน แล้วค่อยไปเรียก moveBy() เพื่อเคลื่อนย้ายเลเยอร์
<![CDATA[
function Checkpos(obj)
{
if (ns4) {
var maxX=window.innerWidth-parseInt(document.layers[obj].clip.width);
var maxY=window.innerHeight-parseInt(document.layers[obj].clip.height);
if (parseInt(document.layers[obj].left)<=0) {Xmove*=-1;}
if (parseInt(document.layers[obj].left)>=maxX) {Xmove*=-1;}
if (parseInt(document.layers[obj].top)<=0) {Ymove*=-1;}
if (parseInt(document.layers[obj].top)>=maxY) {Ymove*=-1;}
}
if (ie4) {
var maxX=window.document.body.offsetWidth-25-parseInt(document
.all[obj].style.width);
var maxY=window.document.body.offsetHeight-8-parseInt(document
.all[obj].style.height);
if (parseInt(document.all[obj].style.left)<=0) {Xmove*=-1;}
if (parseInt(document.all[obj].style.left)>=maxX) {Xmove*=-1;}
if (parseInt(document.all[obj].style.top)<=0) {Ymove*=-1;}
if (parseInt(document.all[obj].style.top)>=maxY) {Ymove*=-1;}
}
}
function moveit(obj) {
Checkpos(obj);
moveBy(obj,Xmove,Ymove);
}
]]>
- ส่วนนี้เป็นฟังก์ชั่นที่สั่งให้สคริปต์เริ่มทำงาน มันจะกำหนดทิศทางให้เคลื่อนไปทางขวาบนก่อน แล้วจึงสั่งให้
moveit() ทำงานทุกๆ 0.1 วินาที
<![CDATA[
function start()
{
Xmove=1;
Ymove=-1;
Timer=setInterval("moveit('layer1')",10);
}
]]>
|
