เมื่อท่องอินเทอร์เน็ต คุณจะพบว่าอินเทอร์เน็ตไม่ได้เป็นเพียงมหาสมุทรแห่งข้อมูลเท่านั้น แต่ยังเป็นมหาสมุทรแห่งการโฆษณาอีกด้วย นอกเหนือจาก Gif Banner และ Flash ทั่วไปแล้ว โฆษณาแบบลอยยังเป็นหนึ่งในรูปแบบการโฆษณาที่ได้รับความนิยมบนอินเทอร์เน็ตในปัจจุบัน เมื่อคุณลากแถบเลื่อนของเบราว์เซอร์ โฆษณาแบบลอยบนหน้าเว็บนี้สามารถเลื่อนไปตามหน้าจอได้ แม้ว่าผลกระทบนี้จะมีคุณค่าในทางปฏิบัติอย่างมากสำหรับการแสดงโฆษณา แต่สำหรับผู้ที่เรียกดูหน้าเว็บของคุณ นี่เป็นสิ่งที่ทั้งขัดขวางการอ่านและส่งผลต่อความสนใจในการอ่าน ดังนั้นจึงต้องไม่ถูกนำไปใช้ในทางที่ผิด อย่างไรก็ตาม หากคุณใช้มันอย่างชาญฉลาด มันจะมีประโยชน์อย่างมาก
การสร้างเอฟเฟ็กต์โฆษณาแบบลอยได้ไม่ใช่เรื่องยาก หากคุณมีความรู้พื้นฐานเกี่ยวกับ JS คุณสามารถเขียนเองได้ หากคุณขี้เกียจเกินไปที่จะเขียน ให้ดาวน์โหลดเครื่องมือเอฟเฟกต์พิเศษทางออนไลน์แล้ววางโค้ดตามที่ได้รับแจ้ง อย่างไรก็ตาม หากคุณต้องการเข้าใจวิธีการสร้างมันจริงๆ คุณต้องเชี่ยวชาญความรู้ JS บ้าง ฉันจะแนะนำวิธีการโฆษณาแบบลอยตัวแบบง่ายๆ ให้คุณทราบที่นี่
รหัสต่อไปนี้สามารถวางไว้ระหว่าง <body></body> ซึ่งในระหว่างนั้นฉันได้เพิ่มความคิดเห็นบางส่วน (เช่น ข้อความหลัง "//" และข้อความระหว่าง "<!—" และ "-->")
<SCRIPT FOR=window EVENT=onload LANGUAGE="JScript">
initAd();//หลังจากโหลดเพจแล้ว ให้เรียกใช้ฟังก์ชัน initAd()
</สคริปต์>
<ภาษาสคริปต์ = "JScript">
-
ฟังก์ชัน initAd() {
document.all.AdLayer.style.posTop = -200;//กำหนดตำแหน่งของชั้นโฆษณาโดยสัมพันธ์กับทิศทาง y คงที่หลังจากเหตุการณ์ onLoad เริ่มทำงาน
document.all.AdLayer.style.visibility = 'visible'//ตั้งค่าเลเยอร์ให้มองเห็นได้
MoveLayer('AdLayer');//ฟังก์ชันการโทร MoveLayer()
-
ฟังก์ชั่น MoveLayer (ชื่อเลเยอร์) {
var x = 600; // เลเยอร์โฆษณาแบบลอยได้รับการแก้ไขที่ตำแหน่ง x-direction ของเบราว์เซอร์
var y = 300; // เลเยอร์โฆษณาแบบลอยได้รับการแก้ไขในทิศทาง y ของเบราว์เซอร์
var diff = (document.body.scrollTop + y - document.all.AdLayer.style.posTop)*.40;
var y = document.body.scrollTop + y - ส่วนต่าง;
eval("document.all." + layerName + ".style.posTop = y");
eval("document.all." + layerName + ".style.posLeft = x");//เลเยอร์โฆษณาบนมือถือ
setTimeout("MoveLayer('AdLayer');", 20);//ตั้งค่า 20 มิลลิวินาทีก่อนที่จะเรียกใช้ฟังก์ชัน MoveLayer()
-
-
</สคริปต์>
<!--ต่อไปนี้เป็นเลเยอร์ที่มี ID ชื่อ AdLayer (หากชื่อ ID ไม่ใช่ AdLayer จะต้องแก้ไข AdLayer ใน MoveLayer() ด้านบนด้วย) รวมถึงรูปภาพที่มีลิงก์ -->
<div id=AdLayer style='position:absolute; width:61px; height:59px; z-index:20; การมองเห็น:ซ่อนอยู่;;
<a href=" http://www.5dmedia.com/bbs"><img src='../qqkk2000.gif' border="0" height="60" width="60"></a>
</div>
ที่นี่ คุณสามารถตั้งค่า x และ y เพื่อกำหนดตำแหน่งของเลเยอร์คงที่ และเปลี่ยนค่า 20 ใน setTimeout("MoveLayer('AdLayer');", 20) เป็นค่าที่คุณ ต้องการเรียกช่วงเวลา MoveLayer() ควรสังเกตว่ารูปภาพที่ใช้ควรเป็น GIF ที่มีพื้นหลังโปร่งใสเพื่อไม่ให้สีพื้นหลังของรูปภาพบดบังเนื้อหาที่อยู่ด้านหลัง
โปรดจำไว้ว่า ใช้โฆษณาแบบลอยด้วยความระมัดระวัง เมื่อพิจารณาการใช้เอฟเฟกต์พิเศษ คุณต้องคำนึงถึงความรู้สึกของผู้ชมด้วยและอย่าละเมิด!