卜扌喿扌圭辶畐经典十句,替身演员(1V1)笔趣阁,黄色免费的网站

build網(wǎng)站制作

制作浮動(dòng)的廣告圖片，你學(xué)會(huì)了么？當(dāng)前位置：首頁(yè)>主要服務(wù)>網(wǎng)站制作>JS/Jquery

制作浮動(dòng)的廣告圖片

在打開(kāi)網(wǎng)站時(shí)，經(jīng)常會(huì)顯示各種隨滾動(dòng)條同步滾動(dòng)的廣告圖片，這些動(dòng)態(tài)的廣告圖片，不僅能起到美化網(wǎng)頁(yè)的作用，而且還可以在網(wǎng)站中對(duì)其他的一些信息進(jìn)行宣傳，從而提高網(wǎng)站的知名度和實(shí)現(xiàn)盈利。
實(shí)現(xiàn)過(guò)程如下：

第一步：使用Dreamweaver創(chuàng)建一個(gè)HTML文檔，為了廣告圖片演示方便，我們?cè)贖TML文檔中插入淘寶網(wǎng)主頁(yè)頁(yè)面效果所對(duì)應(yīng)的圖片
“contentpic.jpg”。

第二步：使用Dreamweaver在HTML文檔中插入一個(gè)層，并設(shè)置層的相關(guān)屬性。
另外，還必須切換到代碼窗口，手動(dòng)修改為style="......"。例如，在DW中插入advLayer層，將自動(dòng)生成如下所示的樣式代碼。

#advLayer{
   position:absolute;
   left:16px;
   top:129px;
   width:180px;
   height:230px;
   z-index:1;
}

我們必須剪切advLayer{}中的樣式代碼，然后復(fù)制到對(duì)應(yīng)的<DIV id="advLayer">的style屬性中，即將其修改為：

中間的回車(chē)符不去掉也可以，注意層的寬度和高度應(yīng)與第三步中插入的圖片大小保持一致，最后去掉內(nèi)嵌樣式剩下的代碼。

第三步：選中層，然后在層中插入圖片“advpic.gif”。此時(shí)層中的圖片還是靜態(tài)的，不能隨滾動(dòng)條同步滾動(dòng)，為了使層能隨滾動(dòng)條動(dòng)起來(lái)，我們還必須編寫(xiě)JavaScript腳步。

第四步：編寫(xiě)用于實(shí)現(xiàn)圖片總位于頁(yè)面頂端左邊位置的JavaScript代碼。

var advInitTop=0；
function move（）{
document.getElementById("advLayer").style.pixelTop=advInitTop+document.body.scrollTop;
}

在第四步的代碼片段中，先說(shuō)明一下為什么用pixelTop屬性而不用top屬性？其原因是top屬性返回帶單位的值，如getElementById("advLayer").style.top將返回“129px;”。同理，left和pixelLeft一樣。另外，通過(guò)document對(duì)象的body的scrollTop和scrollTopLeft屬性來(lái)獲取縱向滾動(dòng)條和橫向滾動(dòng)條所卷去的部分值。此外，使用getElementById（）方法獲取層對(duì)象，如本例document.getElementById("advLayer"),便于對(duì)層的訪問(wèn)和控制。

第五步：捕獲鼠標(biāo)滾動(dòng)事件，當(dāng)頁(yè)面滾動(dòng)時(shí)就調(diào)用move（）函數(shù)。

window.onscroll=move;

上述制作過(guò)程所對(duì)應(yīng)的完整代碼如示例2所示。

示例2

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html;charset=gb2312">
<TITLE>浮動(dòng)廣告圖片</TITLE>
<SCRIPT language="javascript">
var advInitTop=0;//使層總置于頂端的初始值
function move（）{
document.getElementById ("advLayler").style.pixelTop=advInitTop+document.body.scrolllTop;
}
window.onscroll=move;//窗口的滾動(dòng)事件，當(dāng)頁(yè)面滾動(dòng)時(shí)調(diào)用move()函數(shù)
</SCRIPT>
</HEAD>
<BODT>
<div id="advLayer" style="position:absolute; left:16px; top:129px; width:180px; height:230px; z-index:1;">
<img src="inages/advpic.gif" width="180" height="230">
</div>
<p>
 
</p>
<img src="images/contentpic.jpg" width="993" height="1799">
</p>
</BODY>
</HTML>