网页对联广告代码效果大全

　2005-11-07 19:53:40　来源：WEB开发网　　　

核心提示：现在很多网站广告做的如火如荼，现在我就来介绍一下常见的对联浮动广告效果的代码使用方法，网页对联广告代码效果大全，介绍的这种效果，在1024*768分辨率下正常显示，*代表你另存的文件名！注意修改广告图片地址和连接地址！浮动对联广告---之左侧代码如果您想只有一侧显示的话,下面是实现左侧效果所需代码：var ad_fl

现在很多网站广告做的如火如荼，现在我就来介绍一下常见的对联浮动广告效果的代码使用方法，介绍的这种效果，在1024*768分辨率下正常显示，在800*600的分辨率下可以自动隐藏，以免遮住页面影响访问者浏览内容，下面就是实现效果所需代码：

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文件，然后在想实现此效果的页面用调用即可！注意修改广告图片地址和连接地址！

鼠标感应]

与前面一个代码不同的是，当鼠标移动到广告图片上是可以感应显示另外设置好的广告大图效果，下面就是实现效果所需代码：

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=http://www.cncms.com/skin/adv43/ad/ad_ad.gif border=0></a>";
ad_250[0]="<a href=http://www.dfeng.net target=_blank><img src=http://www.cncms.com/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>");

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=http://www.cncms.com/skin/adv43/ad/ad_ad.jpg border=0></a>";
ad_250[0]="<a href=http://www.dfeng.net target=_blank><img src=http://www.cncms.com/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

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()

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文件，然后在想实现此效果的页面用

与前面两个代码不同的是，广告图下方增加了一个图片按纽，允许访客点击关闭广告图片，下面文本框中就是实现效果所需代码：

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 href=http://www.dfeng.net target=_blank><img src=http://www.cncms.com/ad/doublead/right.gif width=100 height=554 border=0></a><br><br><img src=http://www.cncms.com/ad/doublead/close.gif >');
theFloaters.addItem('followDiv2',0,0,'<a href=http://www.dfeng.net target=_blank><img src=http://www.cncms.com/ad/doublead/ad_ad.gif width=100 height=400 border=0 ></a><br><br><img src=http://www.cncms.com/ad/doublead/close.gif >');
theFloaters.play();
把上面的代码另存为一个JS文件，然后在想实现此效果的页面用调用即可，*代表你另存的文件名！注意修改广告图片地址和连接地址！

浮动对联广告---之左侧代码

如果您想只有一侧显示的话,下面是实现左侧效果所需代码：

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 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文件，然后在想实现此效果的页面用