أثناء التجوال عبر الإنترنت، ستجد أن الإنترنت ليس محيطًا من المعلومات فحسب، بل محيطًا من الإعلانات أيضًا. بالإضافة إلى إعلانات 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(layerName) {
var x = 600; // تم تثبيت طبقة الإعلان العائمة في موضع اتجاه x في المتصفح
var y = 300; // تم تثبيت الطبقة الإعلانية العائمة في الاتجاه y للمتصفح
var diff = (document.body.scrollTop + y - document.all.AdLayer.style.posTop)*.40;
var y = document.body.scrollTop + y - diff;
eval("document.all." +layerName + ".style.posTop = y");
eval("document.all." + LayerName + ".style.posLeft = x");// طبقة إعلانات الهاتف المحمول
setTimeout("MoveLayer('AdLayer');", 20);// اضبط 20 مللي ثانية قبل استدعاء الوظيفة MoveLayer()
}
//-->
</script>
<!--ما يلي هو طبقة تحمل اسم المعرف AdLayer (إذا لم يكن اسم المعرف AdLayer، فيجب أيضًا تعديل AdLayer في MoveLayer() أعلاه وفقًا لذلك)، بما في ذلك صورة مع رابط -->
<div id=AdLayer style='position:absolute; 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 ذات خلفية شفافة حتى لا يؤدي لون خلفية الصورة إلى حجب المحتوى الذي يقف خلفها.
تذكر، استخدم الإعلانات العائمة بحذر عند التفكير في استخدام المؤثرات الخاصة، يجب عليك أيضًا مراعاة مشاعر المشاهد وعدم إساءة استخدامها!