| 編程(Programming)是編定程序的中文簡(jiǎn)稱,就是讓計(jì)算機(jī)代碼解決某個(gè)問題,對(duì)某個(gè)計(jì)算體系規(guī)定一定的運(yùn)算方式,使計(jì)算體系按照該計(jì)算方式運(yùn)行,并最終得到相應(yīng)結(jié)果的過程。為了使計(jì)算機(jī)能夠理解(understand)人的意圖,人類就必須將需解決的問題的思路、方法和手段通過計(jì)算機(jī)能夠理解的形式告訴計(jì)算機(jī),使得計(jì)算機(jī)能夠根據(jù)人的指令一步一步去工作,完成某種特定的任務(wù)。這種人和計(jì)算體系之間交流的過程就是編程。 【實(shí)例名稱】 對(duì)聯(lián)廣告JS代碼怎么寫 【實(shí)例描述】 大型門戶網(wǎng)站為了獲取利益都提供了大量的廣告。對(duì)聯(lián)廣告就是常用的具有中國(guó)特色的廣告。本例學(xué)習(xí)制作對(duì)聯(lián)廣告。 【實(shí)例代碼】 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="text/html; charset=gb2312" />
<title>-本站(www.xue51.com)</title>
</head>
<body leftmargin="0" topmargin="0">
<script type="text/javascript">
var delta=0.115
var collection;
function floaters()
{
this.items = [];
//在頁(yè)面中動(dòng)態(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);
}
}
//顯示對(duì)聯(lián),此方法綁定到定時(shí)器
function play()
{
if(screen.width<=800)
{ //寬度小于800時(shí),不顯示對(duì)聯(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)建懸浮對(duì)聯(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>
【運(yùn)行效果】  【難點(diǎn)剖析】 本例的重點(diǎn)是如何動(dòng)態(tài)往頁(yè)面中添加div,并在指定的位置顯示。動(dòng)態(tài)添加元素本例使用的是“document.write”方法,是最常用也是最簡(jiǎn)單的輸出文本流的方法。關(guān)于位置的選取請(qǐng)參考本例的“Play”方法,其中使用了“eval”方法來實(shí)現(xiàn)字符串格式到數(shù)值格式的轉(zhuǎn)換。 【源碼下載】 為了JS代碼的準(zhǔn)確性,請(qǐng)點(diǎn)擊:對(duì)聯(lián)廣告JS代碼 進(jìn)行本實(shí)例源碼下載
使用編程語言寫的程序,由于每條指令都對(duì)應(yīng)計(jì)算機(jī)一個(gè)特定的基本動(dòng)作,所以程序占用內(nèi)存少、執(zhí)行效率高。 |