【参加讨论】 现在很多网站广告做的如火如荼,现在我就来介绍一下常见的对联浮动广告效果的代码使用方法,本文介绍的这种效果,在1024*768分辨率下正常显示,在800*600的分辨率下可以自动隐藏,以免遮住页面影响访问者浏览内容,而且与前面两个代码不同的是,广告图下方增加了一个图片按纽,允许访客点击关闭广告图片,下面文本框中就是实现效果所需代码:
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="http://www.iyit.net/files/beyondpic/2006-5/5/065510023927773.gif" width=100 height=554 border=0></a><br><br><img src="http://www.iyit.net/files/beyondpic/2006-5/5/065510023986431.gif" onclick="closebanner();">');
thefloaters.additem('followdiv2',0,0,'<a onclick="closebanner();" href=http://www.dfeng.net target=_blank><img src="http://www.iyit.net/files/beyondpic/2006-5/5/06551002394686.gif" width=100 height=400 border=0 ></a><br><br><img src="http://www.iyit.net/files/beyondpic/2006-5/5/065510023986431.gif" onclick="closebanner();">');
thefloaters.play();
把上面的代码另存为一个js文件,然后在想实现此效果的页面用调用即可,*代表你另存的文件名!注意修改广告图片地址和连接地址!