:: How to Build ::
- สคริปต์นี้เป็นฟังก์ชั่นเพียงฟังก์ชั่นเดียวครับ
ซึ่งคือโค้ดข้างล่างนี้ การทำงานโดยรวมของมันก็คือ
วาดเลเยอร์เพื่อเป็นเงา หลายๆเลเยอร์ แต่ละเลเยอร์เหลื่อมกันทีละ 1 pixels
และมีค่า opacity ของ Alpha Effect ต่างกัน ทำให้เห็นว่าเงาค่อยๆจางลง
ลองดูโค้ดเต็มก่อน เดี๋ยวผมจะอธิบายการทำงานทีละบรรทัดนะครับ
function DropShadow(elem, color, size)
{
var i;
for (i=size; i>0; i--)
{
var shadow = document.createElement('div');
shadow.style.position = 'absolute';
shadow.style.left = (elem.style.posLeft + i) + 'px';
shadow.style.top = (elem.style.posTop + i) + 'px';
shadow.style.width = elem.offsetWidth + 'px';
shadow.style.height = elem.offsetHeight + 'px';
shadow.style.zIndex = elem.style.zIndex - i;
shadow.style.backgroundColor = color;
var opacity = 1 - i / (i + 1);
shadow.style.filter = 'alpha(opacity=' + (100 * opacity) + ')';
elem.insertAdjacentElement('afterEnd', shadow);
}
}
- ดูที่ส่วนประกาศฟังก์ชั่น จะเห็นว่ามีการรับตัวแปรเข้ามา 3 ตัวคือ
elem color และ size ค่า elem คือ ID ของ element ที่จะทำการ DropShadow
Color คือสีของเงา และ size คือความกว้างของเงาครับ
function DropShadow(elem, color, size)
- ส่วนลูปในฟังก์ชั่น จะถูกกำหนดให้มีจำนวนรอบเท่ากับความกว้างของเงา เพราะเลเยอร์แต่ละชั้นต้อง
เหลื่อมกันทีละ 1 pixels จึงต้องวาดเลเยอร์ซ้อนกันเป็นจำนวนเท่าความกว้างของเงา
for (i=size; i>0; i--)
- บรรทัดนี้เป็นการประกาศอ็อบเจกต์ shadow เป็น Element ในเอกสาร (แต่ยังไม่แสดงผลนะ)
ซึ่งวิธีนี้ใช้ได้เฉพาะใน Internet Explorer เท่านั้น
var shadow = document.createElement('div');
- ส่วนนี้เป็นการกำหนดคุณสมบัติของเลเยอร์เงา ที่ได้ประกาศเอาไว้ในข้อที่แล้ว
ในบรรทัดสุดท้าย เป็นหัวใจของการทำ DropShadow คือการใช้ style.filter
ทำ Alpha Effect ซึ่งเป็นเทคนิคที่ใช้ได้เฉพาะใน Internet Explorer เท่านั้น
shadow.style.position = 'absolute';
shadow.style.left = (elem.style.posLeft + i) + 'px';
shadow.style.top = (elem.style.posTop + i) + 'px';
shadow.style.width = elem.offsetWidth + 'px';
shadow.style.height = elem.offsetHeight + 'px';
shadow.style.zIndex = elem.style.zIndex - i;
shadow.style.backgroundColor = color;
var opacity = 1 - i / (i + 1);
shadow.style.filter = 'alpha(opacity=' + (100 * opacity) + ')';
- ส่วนสุดท้ายก็คือการนำตัวแปรที่ได้ประกาศไว้มาเขียนลงในเอกสาร
ซึ่งการใช้ฟังก์ชั่นนี้จะมีผลเหมือนกับเขียนโค้ดแทรกไว้หลัง element ที่ถูกส่งเข้ามาในฟังก์ชั่น
elem.insertAdjacentElement('afterEnd', shadow);
|