วิธีทำเงาสไตล์ windowsXP

:: 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);

เวลาจะนำฟังก์ชั่นนี้ไปใช้ ต้องประกาศฟังก์ชั่นนี้ไว้ในส่วน Head ก่อน แล้วในแท็กที่ต้องการจะทำเงา ให้ทำ Style sheet เอาไว้ด้วย สิ่งที่ขาดไม่ได้ใน Stylesheet คือ position,top,left,z-index และต้องเติม onload="DropShadow(this,'#666666',5)" ลงไปในแท็กด้วย เพื่อเรียกฟังก์ชั่นขึ้นมาทำงาน <div id="test" style=" background-color: #F1F1F1; position:absolute;left:55;top:45; z-index:60; visiblity:hidden; border-color: #20; border-width: 4px; border-style: outset; " onload="DropShadow(this,'#666666', 5);"> ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง<br> ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง<br> ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง<br> ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง<br> ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง<br> </div> สุดท้าย ลองดูโปรแกรมตัวอย่างครับ [ดูตัวอย่าง]

Back to top

		© copyright 2001 Sorrawut Korsuwansiri