javascript 一段左右兩邊隨屏滾動(dòng)的代碼

更新時(shí)間：2009年06月18日 00:04:51 作者：

在不少的網(wǎng)站使用了這種技術(shù)，一般就是兩邊的一些三個(gè)小塊排一起的廣告。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>一段左右兩邊隨屏滾動(dòng)的代碼</title> 
</head> 

<body> 
<script language="javascript"> 
var delta=0.15 
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()',10); 
} 
} 

function play() 
{ 
if(screen.width<=648||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.documentElement.scrollLeft+followObj_x)) 
{ 
var dx=(document.documentElement.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.documentElement.scrollTop+followObj_y)) 
{ 
var dy=(document.documentElement.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('followDiv2',22,238,'<a href=http://idc.66so.com/ target=_blank><img src=http://www.asp300.com/adimg/66so.gif border=0></a><br><br><a href=http://www.red.net.cn target=_blank><img src=http://www.asp300.com/adimg/red.gif border=0></a><br><br><a href=http://www.wiidc.com target=_blank><img src=http://www.asp300.com/adimg/wiidc.gif border=0></a><br><br><img align=right src=http://www.asp300.com/images/ADclose.gif border=0 onClick="closeBanner();">'); 
theFloaters.addItem('followDiv1','document.body.clientWidth-100',238,'<a href=http://www.zgdata.com/stat/stat.asp?siteKey=asp300&pageNO=1&urlCode=91a3ed97bd9897d315ff6bfaba46a8ee target=_blank><img src=http://www.asp300.com/adimg/zgdata.gif border=0 height=80 width=80></a><br><br><a href=http://www.go020.net/style/info/host.asp?typeid=1 target=_blank><img src=http://www.asp300.com/adimg/go020.gif border=0></a><br><br><a href=http://www.phsjnet.com target=_blank><img src=http://www.asp300.com/adimg/phsjnet.gif border=0></a><br><br><img align=right src=http://www.asp300.com/images/ADclose.gif border=0 onClick="closeBanner();">'); 
theFloaters.play(); 


</script> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
</body> 
</html> 