對聯(lián)廣告JS代碼怎么寫

2012/11/8 15:21:38作者：佚名來源：網(wǎng)絡(luò)

移動端

【實例名稱】

對聯(lián)廣告JS代碼怎么寫

【實例描述】

大型門戶網(wǎng)站為了獲取利益都提供了大量的廣告。對聯(lián)廣告就是常用的具有中國特色的廣告。本例學(xué)習(xí)制作對聯(lián)廣告。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" 
content="text/html; charset=gb2312" />
<title>-學(xué)無憂（yzddtk.cn）</title>
 </head>
<body leftmargin="0" topmargin="0">
<script type="text/javascript">
var delta=0.115 
var collection; 
function floaters() 
{ 
this.items = []; 
//在頁面中動態(tài)添加div，參數(shù)依次代表：div的id，x坐標(biāo),y坐標(biāo),顯示的內(nèi)容
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); 
} 
} 
//顯示對聯(lián)，此方法綁定到定時器
function play() 
{ 
if(screen.width<=800) 
{ //寬度小于800時，不顯示對聯(lián)
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(); 
//創(chuàng)建懸浮對聯(lián)廣告
//添加2幅廣告
theFloaters.addItem('div1','document.body.clientWidth-135',0,
'</a><br><a href=http://images.sohu.com/cs/music/070330_120-120.gif 
target="_blank"><img src=http://images.sohu.com/cs/music/070330_120-120.gif 
width="100" height="267" border="0" /></a>'); 
theFloaters.addItem('div2',20,0,'<br>
<a href="http://images.sohu.com/cs/music/070330_120-120.gif" target="_blank">
<img src="http://images.sohu.com/cs/music/070330_120-120.gif" width="100" 
height="267" border="0" /></a>'); 
theFloaters.play();　　//顯示
</script>
</body>
</html>

【運行效果】

對聯(lián)廣告運行效果

【難點剖析】

本例的重點是如何動態(tài)往頁面中添加div，并在指定的位置顯示。動態(tài)添加元素本例使用的是“document．write”方法，是最常用也是最簡單的輸出文本流的方法。關(guān)于位置的選取請參考本例的“Play”方法，其中使用了“eval”方法來實現(xiàn)字符串格式到數(shù)值格式的轉(zhuǎn)換。

【源碼下載】

為了JS代碼的準(zhǔn)確性，請點擊：對聯(lián)廣告JS代碼進(jìn)行本實例源碼下載