Freecode
>  Home   HTML   CSS   JavaScript   PHP   Perl   Photoshop   TCP/IP 

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

สคริปต์นี้ ใช้สร้างเงาให้กับเลเยอร์ รูปภาพ หรือตาราง โดยเงานี้จะไม่บังสิ่งที่อยู่ข้างหลังจนมิด (แบบเดียวกับใน XP นั่นแหละครับ)

ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง
ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง
ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง
ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง
ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง ตัวอย่าง

:: How to Build ::
  1. สคริปต์นี้เป็นฟังก์ชั่นเพียงฟังก์ชั่นเดียวครับ ซึ่งคือโค้ดข้างล่างนี้ การทำงานโดยรวมของมันก็คือ วาดเลเยอร์เพื่อเป็นเงา หลายๆเลเยอร์ แต่ละเลเยอร์เหลื่อมกันทีละ 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); } }
  2. ดูที่ส่วนประกาศฟังก์ชั่น จะเห็นว่ามีการรับตัวแปรเข้ามา 3 ตัวคือ elem color และ size ค่า elem คือ ID ของ element ที่จะทำการ DropShadow Color คือสีของเงา และ size คือความกว้างของเงาครับ function DropShadow(elem, color, size)
  3. ส่วนลูปในฟังก์ชั่น จะถูกกำหนดให้มีจำนวนรอบเท่ากับความกว้างของเงา เพราะเลเยอร์แต่ละชั้นต้อง เหลื่อมกันทีละ 1 pixels จึงต้องวาดเลเยอร์ซ้อนกันเป็นจำนวนเท่าความกว้างของเงา for (i=size; i>0; i--)
  4. บรรทัดนี้เป็นการประกาศอ็อบเจกต์ shadow เป็น Element ในเอกสาร (แต่ยังไม่แสดงผลนะ) ซึ่งวิธีนี้ใช้ได้เฉพาะใน Internet Explorer เท่านั้น var shadow = document.createElement('div');
  5. ส่วนนี้เป็นการกำหนดคุณสมบัติของเลเยอร์เงา ที่ได้ประกาศเอาไว้ในข้อที่แล้ว ในบรรทัดสุดท้าย เป็นหัวใจของการทำ 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) + ')';
  6. ส่วนสุดท้ายก็คือการนำตัวแปรที่ได้ประกาศไว้มาเขียนลงในเอกสาร ซึ่งการใช้ฟังก์ชั่นนี้จะมีผลเหมือนกับเขียนโค้ดแทรกไว้หลัง 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