หมวดไฟฟ้า/อิเล็กทรอนิกส์/คอมพิวเตอร์ > Programming

วิธีทำแบนเนอร์ให้เปิด-ปิด อัตโนมัติ

(1/1)

Auto Man:
   วิธีทำ Banner ให้เว็บไซต์ แบบเปิดปิดอัตโนมัติ 


วิธีทำ Banner

ดูตัวอย่าง Banner
หลาย ๆ เว็บไซต์จำเป็นต้องมีการแสดง Banner เพราะบางทีแบนเนอร์อาจจะเป็นรายได้หลักของเว็บไซต์ แต่แบนเนอร์นอกจากจะสร้างรายได้โฆษณาให้กับเว็บไซต์แล้ว การจัดวางหรือแสดงแบนเนอร์ในตำแหน่งที่ไม่เหมาะสมอาจจะทำให้เว็บไซต์ของเราถูดบดบังเนื้อหาหลักหรือเบนความสนใจ เนื้อหาที่เราต้องการสื่อกับผู้เข้าชมเว็บไซต์ ทำให้เว็บไซต์ขาดความน่าสนใจและลดความน่าเชื่อถือของผู้ชมที่มีแต่เว็บไซต์ลงไปได้ เพราะเฉพาะนั้นการจัดวางตำแหน่งในการแสดงผล Banner จึงเป็นสิ่งที่นักออกแบบต้องให้ความสำคัญเป็นอย่างยิ่ง



สร้าง Image Banner แบบเปิด-ปิด การแสดงผลอัตโนมัติ



HTML
สร้าง img element สำหรับแสดง Image Banner ขนาดตามความเหมาะสม แนะนำที่ขนาด 250x250px และทำการตั้งชื่อไอดีว่า “banner” โดยให้ใช้ a href element ครอบ img อีกทีหนึ่งเพื่อจะได้ทำเป็นลิงค์ได้


-index.html

--- โค๊ด: ---<a id="banner" href="http://www.codebee.co.th" target="_blank"><img src="banner.jpg"></img>[/url]
--- End code ---


CSS
จากนั้นให้เขียน CSS จัดวางตำแหน่งของ banner ไว้ที่ BOTTOM + LEFT จะเขียน CSS ได้ดังนี้



--- โค๊ด: ---#banner{
    border:1px solid #000;
    display: none;
    position: fixed;
    bottom: 0px;
    right: 0px;
    z-index: 9998;
}
--- End code ---


Javascript
ต่อมาให้เขียน Javascript สำหรับกำหนดตำแหน่งในการ เปิด/ปิด การแสดงผล โดยในตัวอย่างจะให้แสดงผลเมื่อเลื่อนหน้าเพจลงมาเกิน 10px และถ้าเลื่อนขึ้นไปด้านบนต่ำกว่า 10px จะไม่ให้ banner แสดงในหน้าเว็บ



--- โค๊ด: ---$(document).ready(function(e) {
   $(window).scroll(function() {
      if($(window).scrollTop() <= 10){
         $("#banner").hide("fast");
      }else{
         $("#banner").show("fast");
      }
   });
 });
--- End code ---

เพียงเท่านี้เราก็จะสามารถกำหนดตำแหน่งที่อยากจะให้ Banner แสดงผลได้แล้วครับ เราสามารถปรับเปลี่ยนตำแหน่งของ Banner ได้ในส่วนของ CSS ตัวอย่างเช่นถ้าอยากให้ Banner แสดงในตำแหน่ง LEFT + BOTTOM ก็จะสามารถเขียน CSS ได้ในลักษณะนี้



--- โค๊ด: ---#banner{
    bottom: 0px;
    left: 0px;
}
--- End code ---


จากโค๊ดด้านบนทั้งหมด ท่านสามารถเข้าไปดูตัวอย่างการทำงานโดยรวมทั้งหมดได้ตามลิงค์ด้านล่างครับ

- ตัวอย่างคลิ๊กไปดูที่นี่...

   มาจากที่นี่...

นำร่อง

[0] ดัชนีข้อความ

ดูเหมือนว่าคุณยังไม่ได้ลงทะเบียนสมาชิก ต้องการสมัครคลิ๊กที่นี่...