في الوقت الحاضر، تعمل العديد من إعلانات مواقع الويب على قدم وساق. الآن سأقدم استخدام الكود لتأثير الإعلان العائم المشترك. يمكن عرض التأثير المقدم بشكل طبيعي بدقة 1024*768 ويمكن عرضه بدقة 800*600. إخفاء تلقائيًا لتجنب حظر الصفحة والتأثير على محتوى تصفح الزوار، وفيما يلي الكود المطلوب لتحقيق التأثير:
فاردلتا=0.015
مجموعة فار؛
العوامات الدالة () {
this.items = [];
this.addItem = الوظيفة (المعرف، x، y، المحتوى)
{
document.write('<DIV id='+id+' style ="Z-INDEX: 0; POSITION: مطلق; width:80px; height:60px;left:'+(typeof(x)=='string'?eval (x):x)+';top:'+(typeof(y)=='string'?eval(y):y)+'">'+content+'</DIV>');
var newItem = {};
newItem.object = document.getElementById(id);
newItem.x = x;
newItem.y = y;
this.items[this.items.length] = newItem;
}
this.play = وظيفة ()
{
المجموعة = this.items
setInterval('play()',10);
}
}
تشغيل الوظيفة ()
{
إذا (شاشة العرض <= 800)
{
for(var i=0;i<collection.length;i++)
{
مجموعة[i].object.style.display = 'none';
}
يعود؛
}
for(var i=0;i<collection.length;i++)
{
var FollowObj = Collection[i].object;
var FollowObj_x = (typeof(collection[i].x)=='string'?eval(collection[i].x):collection[i].x);
var FollowObj_y = (typeof(collection[i].y)=='string'?eval(collection[i].y):collection[i].y);
if(followObj.offsetLeft!=(document.body.scrollLeft +followObj_x)) {
var dx=(document.body.scrollLeft+followObj_x-followObj.offsetLeft)*delta;
dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx));
FollowObj.style.left=followObj.offsetLeft+dx;
}
if(followObj.offsetTop!=(document.body.scrollTop+followObj_y)) {
var dy=(document.body.scrollTop+followObj_y-followObj.offsetTop)*delta;
dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy));
FollowObj.style.top=followObj.offsetTop+dy;
}
FollowObj.style.display = '';
}
}
var theFloaters = new floaters();
theFloaters.addItem('followDiv1','document.body.clientWidth-100',0,'</a><br><a href=عنوان رابط الإعلان target=_blank><img src=عرض عنوان الصورة الإعلانية=100 ارتفاع =400 حدود=0></a>');
theFloaters.addItem('followDiv2',0,0,'<br><a href=عنوان الرابط الإعلاني target=_blank><img src=عرض عنوان الصورة الإعلانية=100 الارتفاع=400 حد=0></a>') ;
theFloaters.play();
احفظ الكود أعلاه كملف JS، ثم قم باستدعائه على الصفحة التي تريد تحقيق هذا التأثير فيها! انتبه إلى تعديل عنوان صورة الإعلان وعنوان الرابط!
[استشعار الماوس]
يختلف عن الكود السابق، عندما يتحرك الماوس فوق صورة الإعلان، يمكنه استشعار وعرض تأثير الصورة الكبيرة للإعلان الذي تم تعيينه بشكل إضافي، وفيما يلي الكود المطلوب لتحقيق التأثير:
وظيفة عرض كبير () {
document.all.div_250.style.visibility = 'visible';
document.all.div_80.style.visibility = 'hidden';
}
وظيفة إخفاء () {
document.all.div_80.style.visibility = 'visible';
document.all.div_250.style.visibility = 'hidden';
}
var ad_80= new Array(1);
var ad_250= new Array(1);
ad_80[0]="<a href=http://www.dfeng.net target=_blank><img src=/skin/adv43/ad/ad_ad.gif border=0> </a>";
ad_250[0]="<a href=http://www.dfeng.net target=_blank><img src=/skin/adv43/ad/ad_ad2.gif border=0></a>";
var imgheight;
فار فوبيوليفت؛
window.screen.width>800 ? fubioleft=15:fubioleft=15
document.write('<DIV id=floater_left style ="Z-INDEX: 25; LEFT:'+fubioleft+'px; WIDTH: 28px;POSITION: مطلق; الأعلى: 42 بكسل؛ الارتفاع: 22 بكسل">');
ad_now = new Date();
ad_id= ad_now.getSeconds() %1
var adhead1="<div id=div_80 style='position:absolute; width:95px; height:62px; z-index:12' onMouseOver=bigshow();>";
var adhead2="</div><div id=div_250 style='position:absolute; الرؤية: مخفي; z-index:13;width: 80; الارتفاع: 60' onMouseOut=bighide();>";
//var adhead1="<div id=div_80 style='position:absolute; width:95px; height:62px; z-index:20' onMouseOut='//MM_showHideLayers("div_250"،""،"hide ")' onMouseOver='MM_showHideLayers("div_250"،""،"show")'>";
//var adhead2="</div><div id=div_250 style='position:absolute; z-index:21;الرؤية: مخفي؛ العرض: 80; الارتفاع: 60' onMouseOver='MM_showHideLayers("div_250" ,""،"show")' onMouseOut='MM_showHideLayers("div_250"،""،"hide")'>";
document.write(adhead1+ad_80[ad_id]+ adhead2+ad_250[ad_id]+"</div>");
document.write("</div>");
self.onError=null;
currentX = currentY = 0;
thisIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) 1: 0؛
IE = (document.all) ?
وظيفة نبضات القلب () {
إذا (أي) {
diffY = document.body.scrollTop;
diffX = document.body.scrollLeft }
إذا (نس) {
diffY = self.pageYOffset;
إذا (diffY!= lastScrollY) {
النسبة المئوية = .5 * (diffY - lastScrollY)؛
إذا (نسبة مئوية > 0) نسبة مئوية = Math.ceil(نسبة مئوية)؛
نسبة أخرى = Math.floor(percent);
if(IE) document.all.floater_left.style.pixelTop += بالمائة;
if(NS) document.floater_left.top += بالمائة;
lastScrollY = lastScrollY + بالمائة؛
}
إذا (diffX!= lastScrollX) {
النسبة المئوية = .5 * (diffX - lastScrollX)؛
إذا (نسبة مئوية > 0) نسبة مئوية = Math.ceil(نسبة مئوية)؛
نسبة أخرى = Math.floor(percent);
if(IE) document.all.floater_left.style.pixelLeft += بالمائة;
if(NS) document.floater_left.left += بالمائة؛
lastScrollX = lastScrollX + بالمائة؛
}
}
if(NS || IE) action = window.setInterval("heartBeat()",1);var ad_80= new Array(1);
var ad_250= new Array(1);
ad_80[0]="<a href=http://www.dfeng.net target=_blank><img src=/skin/adv43/ad/ad_ad.jpg border=0> </a>";
ad_250[0]="<a href=http://www.dfeng.net target=_blank><img src=/skin/adv43/ad/ad_ad.jpg border=0></a>";
var imgheight;
فار فوبيوليفت؛
window.screen.width>800 ? fubioleft=15:fubioleft=15
document.write('<DIV id=floater_right style="Z-INDEX: 25; LEFT:'+fubioleft+'px; WIDTH: 28px;POSITION: مطلق; الأعلى: 42 بكسل؛ الارتفاع: 22 بكسل">');
ad_now = new Date();
ad_id= ad_now.getSeconds() %1
وظيفة تحميلي ()
{
إذا (navigator.appName == "Netscape")
{
document.div_right_80.pageX=+window.innerWidth-130;
document.div_right_250.pageX=+window.innerWidth-300;
mymove();
}
آخر
{
div_right_80.style.left=document.body.offsetWidth-130;
div_right_250.style.left=document.body.offsetWidth-300;
mymove();
}
}
الدالة mymove()
{
إذا (document.ns)
{
document.div_right_80.left=pageXOffset+window.innerWidth-130;
document.div_right_250.left=pageXOffset+window.innerWidth-300;
setTimeout("mymove();",20)
}
آخر
{
div_right_80.style.left=document.body.scrollLeft+document.body.offsetWidth-145;
div_right_250.style.left=document.body.scrollLeft+document.body.offsetWidth-300;
setTimeout("mymove();",20)
}
}
var adhead1="<div id=div_right_80 style='position:absolute; width:95px; height:60px; z-index:12' onMouseOver=bigshow_right();>";
var adhead2="</div><div id=div_right_250 style='position:absolute; الرؤية: مخفي; z-index:13;width: 250; الارتفاع: 250' onMouseOut=bighide_right();><div align=right >";
document.write(adhead1+ad_80[ad_id]+adhead2+ad_250[ad_id]+"</div></div>");
myload()
document.write ("</div>");
self.onError=null;
currentX_right = currentY_right = 0;
thatIt_right = null;
lastScrollX_right = 0; lastScrollY_right = 0;
NS = (document.layers) 1: 0؛
IE = (document.all) ?
وظيفة نبض القلب_يمين () {
إذا (أي) {
diffY_right = document.body.scrollTop;
diffX_right = document.body.scrollLeft }
إذا (نس) {
diffY_right = self.pageYOffset;
إذا (diffY_right!= lastScrollY_right) {
بالمائة_يمين = .5 * (diffY_right - lastScrollY_right);
إذا (percent_right > 0) بالمائة_right = Math.ceil(percent_right);
else بالمائة_right = Math.floor(percent_right);
if(IE) document.all.floater_right.style.pixelTop += بالمائة_right;
if(NS) document.floater_right.top += بالمائة_right;
lastScrollY_right = lastScrollY_right + بالمائة_right;
}
إذا (diffX_right!= lastScrollX_right) {
بالمائة_يمين = .5 * (diffX_right - lastScrollX_right)؛
إذا (percent_right > 0) بالمائة_right = Math.ceil(percent_right);
else بالمائة_right = Math.floor(percent_right);
if(IE) document.all.floater_right.style.pixelLeft += بالمائة_right;
if(NS) document.floater_right.left += بالمائة_right;
lastScrollX_right = lastScrollX_right + بالمائة_right;
}
}
if(NS || IE) action = window.setInterval("heartBeat_right()",1);
الدالة bigshow_right(){
document.all.div_right_250.style.visibility = 'visible';
document.all.div_right_80.style.visibility = 'hidden';
}
الدالة bighide_right(){
document.all.div_right_80.style.visibility = 'visible';
document.all.div_right_250.style.visibility = 'hidden';
}document.write('');
document.write('');
document.write('');
احفظ الكود أعلاه كملف JS، ثم استخدمه على الصفحة التي تريد تحقيق هذا التأثير فيها.
<script type="text/javascript" language="javascript1.2" src="*.js"></SCRIPT>
ما عليك سوى تسميته، * يمثل اسم الملف الذي قمت بحفظه! انتبه إلى تعديل عنوان صورة الإعلان وعنوان الرابط!
وبخلاف الكودين السابقين، يتم إضافة زر صورة أسفل الصورة الإعلانية، مما يسمح للزوار بالنقر لإغلاق الصورة الإعلانية، ومربع النص التالي هو الكود المطلوب لتحقيق التأثير:
فار دلتا=0.015;
مجموعة فار؛
var CloseB=false;
العوامات الدالة () {
this.items = [];
this.addItem = الوظيفة (المعرف، x، y، المحتوى)
{
document.write('<DIV id='+id+' style ="Z-INDEX: 10; POSITION: مطلق; width:80px; height:60px;left:'+(typeof(x)=='string'?eval (x):x)+';top:'+(typeof(y)=='string'?eval(y):y)+'">'+content+'</DIV>');
var newItem = {};
newItem.object = document.getElementById(id);
newItem.x = x;
newItem.y = y;
this.items[this.items.length] = newItem;
}
this.play = وظيفة ()
{
المجموعة = this.items
setInterval('play()',30);
}
}
تشغيل الوظيفة ()
{
إذا (screen.width <= 800 || CloseB)
{
for(var i=0;i<collection.length;i++)
{
مجموعة[i].object.style.display = 'none';
}
يعود؛
}
for(var i=0;i<collection.length;i++)
{
var FollowObj = Collection[i].object;
var FollowObj_x = (typeof(collection[i].x)=='string'?eval(collection[i].x):collection[i].x);
var FollowObj_y = (typeof(collection[i].y)=='string'?eval(collection[i].y):collection[i].y);
if(followObj.offsetLeft!=(document.body.scrollLeft +followObj_x)) {
var dx=(document.body.scrollLeft+followObj_x-followObj.offsetLeft)*delta;
dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx));
FollowObj.style.left=followObj.offsetLeft+dx;
}
if(followObj.offsetTop!=(document.body.scrollTop+followObj_y)) {
var dy=(document.body.scrollTop+followObj_y-followObj.offsetTop)*delta;
dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy));
FollowObj.style.top=followObj.offsetTop+dy;
}
FollowObj.style.display = '';
}
}
وظيفة CloseBanner()
{
CloseB=true;
يعود؛
}
var theFloaters = new floaters();
//
theFloaters.addItem('followDiv1','document.body.clientWidth-100',0,'<a onClick=" CloseBanner();" href=http://www.dfeng.net target=_blank><img src= ad/doublead/right.gif width=100 height=554 border=0></a><br><br><img src=ad/doublead/ Close.gif onClick=" CloseBanner();">');
theFloaters.addItem('followDiv2',0,0,'<a onClick=" CloseBanner();" href=http://www.dfeng.net target=_blank><img src=ad/doublead/ad_ad.gif width =100 ارتفاع=400 حدود=0 </a><br><br><img src=ad/doublead/إغلاق.gif onClick=" CloseBanner();">');
theFloaters.play();
احفظ الكود أعلاه كملف JS، ثم قم باستدعائه على الصفحة حيث تريد تحقيق هذا التأثير * يمثل اسم الملف الذي قمت بحفظه! انتبه إلى تعديل عنوان صورة الإعلان وعنوان الرابط!
إعلانات المقاطع العائمة --- الكود الموجود على الجانب الأيسر
إذا كنت تريد عرض جانب واحد فقط، فيما يلي الكود المطلوب لتحقيق التأثير على الجانب الأيسر:
var ad_float_left_src = "عنوان الصورة";
var ad_float_left_url="address";
var ad_float_left_type = "";
document.ns = navigator.appName == "Microsoft Internet Explorer"
var imgheight_ Close
var imgleft
window.screen.width>800 ؟
window.screen.width>800 ? imgleft=8:imgleft=122
وظيفة تحميلي ()
{
myleft.style.top=document.body.scrollTop+document.body.offsetHeigh
t-imgheight_إغلاق;
myleft.style.left=imgleft;
leftmove();
}
وظيفة التحرك لليسار ()
{
myleft.style.top=document.body.scrollTop+document.body.offsetHeigh
t-imgheight_إغلاق;
myleft.style.left=imgleft;
setTimeout("leftmove();",50)
}
function MM_reloadPage(init) { // يعيد تحميل النافذة إذا كان Nav4
تم تغيير حجمها
إذا (init==true) مع (المستكشف) {if ((appName=="Netscape")&&
(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage }}
وإلا إذا (innerWidth!=document.MM_pgW || ارتفاع داخلي!
=document.MM_pgH) location.reload();
}
MM_reloadPage(صحيح)
Close_float_left(){
myleft.style.visibility='hidden';
}
document.write("<div id=myleft style='position:
مطلق؛العرض:80؛الأعلى:300؛اليسار:5؛الرؤية: مرئية؛مؤشر-z: 1'>"
+"<نمط>"
+"A.Closefloat:link،A.refloat:زارت {text-
الزخرفة: لا شيء؛ اللون: #000000؛ حجم الخط: 12 بكسل}"
+"A.Closefloat:active،A.refloat:hover {text-decoration:underline;color:#0000FF;font-size:12px}"
+"</style>"
+"<table border=0 cellpadding=0 cellpacing=0><tr><td>")
;
إذا (ad_float_left_type! = "swf")
document.write("<a href='" + ad_float_left_url + "' الهدف
= '_blank'><img src='" + ad_float_left_src + "' WIDTH=88
height=31 border=0></a>");
آخر
document.write("<EMBED src='" + ad_float_left_src + "'
الجودة=العرض العالي=80 الارتفاع=80 النوع='application/x-shockwave-
flash' id=changhongout </EMBED>");
document.write("</td></tr><tr><td width=80 height=20
align=right><a href='javascript:إغلاق_float_left();void(0);'
class=Closefloat><b><font color=#ff0000>إغلاق</font></b></a></td></tr>"
+"</table>"
+"</div>")
;
احفظ الكود أعلاه كملف *.JS، ثم استخدمه على الصفحة التي تريد تحقيق هذا التأثير فيها.
<script src="*.js"></SCRIPT>
ما عليك سوى تسميته، * يمثل اسم الملف الذي قمت بحفظه! انتبه إلى تعديل عنوان صورة الإعلان وعنوان الرابط! يمكن تعديل المعلمات المقابلة وفقًا للصفحة.