現在很多網站廣告做的如火如荼，現在我就來介紹一下常見的對聯浮動廣告效果的代碼使用方法，介紹的這種效果，在1024*768分辨率下正常顯示，在800*600的分辨率下可以自動隱藏，以免遮住頁面影響訪問者瀏覽內容，下面就是實現效果所需代碼：

? CODE:

??

? ? var delta=0.015 ? ? var collection; ? ? function floaters() { ? ?? ???this.items? ? = []; ? ?? ???this.addItem? ? = function(id,x,y,content) ? ?? ?? ?? ?? ?? ?{ ? ?? ?? ?? ?? ?? ???document.write('<DIV id='+id+' style="Z-INDEX: 0; POSITION: absolute;??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? ? = function() ? ?? ?? ?? ?? ?? ?{ ? ?? ?? ?? ?? ?? ???collection? ?? ?? ?? ?? ? = this.items ? ?? ?? ?? ?? ?? ???setInterval('play()',10); ? ?? ?? ?? ?? ?? ?} ? ?? ???} ? ?? ???function play() ? ?? ???{ ? ?? ?? ?? ?if(screen.width<=800) ? ?? ?? ?? ?{ ? ?? ?? ?? ?? ? for(var i=0;i<collection.length;i++) ? ?? ?? ?? ?? ? { ? ?? ?? ?? ?? ?? ???collection[i].object.style.display? ? = 'none'; ? ?? ?? ?? ?? ? } ? ?? ?? ?? ?? ? return; ? ?? ?? ?? ?} ? ?? ?? ?? ?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=廣告圖片地址 width=100 height=400 border=0></a>'); ? ? theFloaters.addItem('followDiv2',0,0,'<br><a href=廣告鏈接地址 target=_blank><img src=廣告圖片地址 width=100 height=400 border=0></a>'); ? ? theFloaters.play();??

把上面的代碼另存為一個JS文件，然后在想實現此效果的頁面用 調用即可！注意修改廣告圖片地址和連接地址！

[鼠標感應]

與前面一個代碼不同的是，當鼠標移動到廣告圖片上是可以感應顯示另外設置好的廣告大圖效果，下面就是實現效果所需代碼：

? CODE:

??

function bigshow(){ document.all.div_250.style.visibility = 'visible'; document.all.div_80.style.visibility = 'hidden'; } function bighide(){ 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; var fubioleft; window.screen.width>800 ? fubioleft=15:fubioleft=15 document.write('<DIV id=floater_left style="Z-INDEX: 25; LEFT:'+fubioleft+'px; WIDTH: 28px;POSITION: absolute; TOP: 42px; HEIGHT: 22px">'); 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;??visibility: hidden; z-index:13;width: 80; height: 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;visibility: hidden; width: 80; height: 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; ? ???whichIt = null;? ?? ?? ? ? ???lastScrollX = 0; lastScrollY = 0; ? ???NS = (document.layers) ? 1 : 0; ? ???IE = (document.all) ? 1: 0;? ? ? ???function heartBeat() { ? ?? ?if(IE) { ??diffY = document.body.scrollTop; ??diffX = document.body.scrollLeft; } ? ?? ?? ?? ? if(NS) { ? ?diffY = self.pageYOffset; diffX = self.pageXOffset; } ? ?? ?if(diffY != lastScrollY) { ? ?? ?? ?? ?? ?? ?? ?percent = .5 * (diffY - lastScrollY); ? ?? ?? ?? ?? ?? ?? ?if(percent > 0) percent = Math.ceil(percent); ? ?? ?? ?? ?? ?? ?? ?else percent = Math.floor(percent); ? ?? ?? ?if(IE) document.all.floater_left.style.pixelTop += percent; ? ?? ?? ?if(NS) document.floater_left.top += percent; ? ?? ?? ?? ?? ?? ?? ?lastScrollY = lastScrollY + percent; ? ?? ?? ?} ? ?? ?if(diffX != lastScrollX) { ? ?? ? percent = .5 * (diffX - lastScrollX); ? ?? ? if(percent > 0) percent = Math.ceil(percent); ? ?? ? else percent = Math.floor(percent); ? ?? ? if(IE) document.all.floater_left.style.pixelLeft += percent; ? ?? ? if(NS) document.floater_left.left += percent; ? ?? ? lastScrollX = lastScrollX + percent; ? ?? ?} ? ???} ? ???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; var fubioleft; window.screen.width>800 ? fubioleft=15:fubioleft=15 document.write('<DIV id=floater_right style="Z-INDEX: 25; LEFT:'+fubioleft+'px; WIDTH: 28px;POSITION: absolute; TOP: 42px; HEIGHT: 22px">'); ad_now = new Date(); ad_id= ad_now.getSeconds() %1 function myload() { if (navigator.appName == "Netscape") { document.div_right_80.pageX=+window.innerWidth-130; document.div_right_250.pageX=+window.innerWidth-300; mymove(); } else { div_right_80.style.left=document.body.offsetWidth-130; div_right_250.style.left=document.body.offsetWidth-300; mymove(); } } function mymove() { if(document.ns) { document.div_right_80.left=pageXOffset+window.innerWidth-130; document.div_right_250.left=pageXOffset+window.innerWidth-300; setTimeout("mymove();",20) } else { 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;??visibility: hidden; z-index:13;width: 250; height: 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; ? ???whichIt_right = null;? ?? ?? ? ? ???lastScrollX_right = 0; lastScrollY_right = 0; ? ???NS = (document.layers) ? 1 : 0; ? ???IE = (document.all) ? 1: 0;? ? ? ???function heartBeat_right() { ? ?? ?if(IE) { ??diffY_right = document.body.scrollTop; ??diffX_right = document.body.scrollLeft; } ? ?? ?? ?? ? if(NS) { ? ?diffY_right = self.pageYOffset; diffX_right = self.pageXOffset; } ? ?? ?if(diffY_right != lastScrollY_right) { ? ?? ?? ?? ?? ?? ?? ?percent_right = .5 * (diffY_right - lastScrollY_right); ? ?? ?? ?? ?? ?? ?? ?if(percent_right > 0) percent_right = Math.ceil(percent_right); ? ?? ?? ?? ?? ?? ?? ?else percent_right = Math.floor(percent_right); ? ?? ?? ?if(IE) document.all.floater_right.style.pixelTop += percent_right; ? ?? ?? ?if(NS) document.floater_right.top += percent_right; ? ?? ?? ?? ?? ?? ?? ?lastScrollY_right = lastScrollY_right + percent_right; ? ?? ?? ?} ? ?? ?if(diffX_right != lastScrollX_right) { ? ?? ? percent_right = .5 * (diffX_right - lastScrollX_right); ? ?? ? if(percent_right > 0) percent_right = Math.ceil(percent_right); ? ?? ? else percent_right = Math.floor(percent_right); ? ?? ? if(IE) document.all.floater_right.style.pixelLeft += percent_right; ? ?? ? if(NS) document.floater_right.left += percent_right; ? ?? ? lastScrollX_right = lastScrollX_right + percent_right; ? ?? ?} ? ???} ? ???if(NS || IE) action = window.setInterval("heartBeat_right()",1); function bigshow_right(){ document.all.div_right_250.style.visibility = 'visible'; document.all.div_right_80.style.visibility = 'hidden'; } function 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文件，然后在想實現此效果的頁面用

? CODE:	??
<script type="text/javascript" language="javascript1.2" src="*.js"></SCRIPT>

調用即可，*代表你另存的文件名！注意修改廣告圖片地址和連接地址！

[允許關閉]

與前面兩個代碼不同的是，廣告圖下方增加了一個圖片按紐，允許訪客點擊關閉廣告圖片，下面文本框中就是實現效果所需代碼：

? CODE:

??

var delta=0.015; var collection; var closeB=false; function floaters() { ??this.items = []; ??this.addItem = function(id,x,y,content) ? ?? ?{ ? ???document.write('<DIV id='+id+' style="Z-INDEX: 10; POSITION: absolute;??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 = function() ? ?? ?{ ? ???collection? ? = this.items ? ???setInterval('play()',30); ? ?? ?} ??} ??function play() ??{ ? ?if(screen.width<=800 || closeB) ? ?{ ? ? for(var i=0;i<collection.length;i++) ? ? { ? ???collection[i].object.style.display = 'none'; ? ? } ? ? return; ? ?} ? ?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 = ''; ? ?} ??} ??function closeBanner() ??{ ? ?closeB=true; ? ?return; ??} 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 height=400 border=0 ></a><br><br><img src=ad/doublead/close.gif onClick="closeBanner();">'); theFloaters.play();

把上面的代碼另存為一個JS文件，然后在想實現此效果的頁面用 調用即可，*代表你另存的文件名！注意修改廣告圖片地址和連接地址！

浮動對聯廣告---之左側代碼

如果您想只有一側顯示的話,下面是實現左側效果所需代碼：

? CODE:

var ad_float_left_src ="圖片地址"; var ad_float_left_url ="地址"; var ad_float_left_type = ""; document.ns = navigator.appName == "Microsoft Internet Explorer" var imgheight_close var imgleft window.screen.width>800 ? imgheight_close=120:imgheight_close=120 window.screen.width>800 ? imgleft=8:imgleft=122 function myload() { myleft.style.top=document.body.scrollTop+document.body.offsetHeigh t-imgheight_close; myleft.style.left=imgleft; leftmove(); } function leftmove() { myleft.style.top=document.body.scrollTop+document.body.offsetHeigh t-imgheight_close; myleft.style.left=imgleft; setTimeout("leftmove();",50) } function MM_reloadPage(init) {??//reloads the window if Nav4 resized ??if (init==true) with (navigator) {if ((appName=="Netscape")&& (parseInt(appVersion)==4)) { ? ? document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; οnresize=MM_reloadPage; }} ??else if (innerWidth!=document.MM_pgW || innerHeight! =document.MM_pgH) location.reload(); } MM_reloadPage(true) function close_float_left(){ myleft.style.visibility='hidden'; } document.write("<div id=myleft style='position: absolute;width:80;top:300;left:5;visibility: visible;z-index: 1'>" +"<style>" +"A.closefloat:link,A.refloat:visited {text- decoration:none;color:#000000;font-size:12px}" +"A.closefloat:active,A.refloat:hover {text-decoration:underline;color:#0000FF;font-size:12px}" +"</style>" +"<table border=0 cellpadding=0 cellspacing=0><tr><td>"); if(document.ns){ if(ad_float_left_type!="swf") document.write("<a href='" + ad_float_left_url + "' target = '_blank'><img src='" + ad_float_left_src + "' WIDTH=88 height=31 border=0></a>"); else document.write("<EMBED src='" + ad_float_left_src + "' quality=high??WIDTH=80 HEIGHT=80 TYPE='application/x-shockwave- flash' id=changhongout ></EMBED>"); document.write("</td></tr><tr><td width=80 height=20 align=right><a href='javascript:close_float_left();void(0);' class=closefloat><b><font color=#ff0000>關閉</font></b></a></td></tr>" +"</table>" +"</div>"); myload()}

把上面的代碼另存為一個*.JS文件，然后在想實現此效果的頁面用

? CODE:	??
<script??src="*.js"></SCRIPT>

總結

以上是生活随笔為你收集整理的常用 javascript广告代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。