帶關(guān)閉的對聯(lián)廣告JS代碼怎么寫

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

移動端

【實(shí)例名稱】

【實(shí)例描述】

大型綜合網(wǎng)站一般都提供對聯(lián)廣告，但為了不影響用戶操作，允許用戶關(guān)閉這些廣告。本例提供一個可關(guān)閉的對聯(lián)廣告效果。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁-學(xué)無憂（wangbatian.cn）</title>
</head>
<body>
<DIV id=ad_dl01 
style="Z-INDEX: 1; LEFT: 5px; VISIBILITY: visible; 
WIDTH: 100px; POSITION: absolute; TOP: 55px">
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
  <TBODY>
 <TR>
    <TD align=left><A onClick="ad_dl01.style.visibility='hidden'">
關(guān)閉</A></TD></TR>
    <TR>
    <TD><img src=http://images.sohu.com/cs/music/070330_120-120.gif 
width="100" height="267" border="0" />
 </TD></TR></TBODY></TABLE></DIV>
<DIV id=ad_dl02 
style="Z-INDEX: 1; RIGHT: 5px; VISIBILITY: visible; 
WIDTH: 100px; POSITION: absolute; TOP: 55px">
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
  <TBODY>
  <TR>
    <TD align=left><A onClick="ad_dl02.style.visibility='hidden'">關(guān)閉</A>
</TD></TR>
  <TR>
    <TD><img src=http://images.sohu.com/cs/music/070330_120-120.gif 
width="100" height="267" border="0" />
    </TD></TR></TBODY></TABLE></DIV>
</body>
</html>

【運(yùn)行效果】

帶關(guān)閉的對聯(lián)廣告運(yùn)行效果

【難點(diǎn)剖析】

本例的重點(diǎn)是頁面的布局。兩個對聯(lián)廣告使用兩個div層構(gòu)成，在層中使用了表格，其中實(shí)現(xiàn)“關(guān)閉”功能的是一個鏈接。關(guān)閉功能其實(shí)是將div的樣式屬性“visibility”設(shè)曩“hidden”，表示div不可見。

【源碼下載】

為了JS代碼的準(zhǔn)確性，請點(diǎn)擊：帶關(guān)閉的對聯(lián)廣告JS代碼進(jìn)行本實(shí)例源碼下載

標(biāo)簽： JS代碼廣告