中文字幕亚洲欧美一区_国产JIZZJIZZ免费看_亚洲av大码在线_亚洲黄色一级毛片_野花影视大全在线观看免费_欧美一区二区三区免费不卡_欧美日韩国产在线精品_国产福利盒子在线看片_精品国产人成在线_日韩欧美动漫一区在线

咨詢電話：024-31891684

網(wǎng)站建設(shè)|注冊|登錄 | 易勢大連分公司

沈陽網(wǎng)站制作易勢最專業(yè)！

 

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

制作浮動的廣告圖片


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

 


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

 

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


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


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

 

<DIV  id="advLayer"style="position:absolute; left:16px; top:129px; width:180px; height:230px;z-index:1;">

 

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

 

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

 

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

 

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


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

 

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

 

window.onscroll=move;


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

 

示例2

 

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html;charset=gb2312">
<TITLE>浮動廣告圖片</TITLE>
<SCRIPT language="javascript">
var advInitTop=0;//使層總置于頂端的初始值
function move（）{
document.getElementById ("advLayler").style.pixelTop=advInitTop+document.body.scrolllTop;
}
window.onscroll=move;//窗口的滾動事件，當頁面滾動時調(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>
&nbsp;
</p>
<img src="images/contentpic.jpg" width="993" height="1799">
</p>
</BODY>
</HTML>

 

在網(wǎng)頁中，瀏覽器窗口的左上角默認為原點（0,0）位置。HTML對象的起點位置坐標（x,y）一般分別使用left和top屬性表示，分別代表該對象的左邊距和上邊距。

 

<div id="advLayer" style="position:absolute;left:16px; top:129px; width:180px; height:230px; z-index:1;">

 

所以上述代碼表示advLayer層的左邊距和上邊距分別為16像素和129像素，即層的初始位置是固定的。

 

上一條資訊|返回欄目頁|下一條資訊

沈陽網(wǎng)站制作--網(wǎng)站前臺效果

易勢網(wǎng)站制作，以DIV+CSS為主，js/jQuery為輔，制作利于優(yōu)化，頁面美觀的優(yōu)質(zhì)網(wǎng)站！

top

網(wǎng)絡(luò)策劃公司|新浪官方微博|大連網(wǎng)站建設(shè)