本文實例講述了JS實現可點擊展開與關閉的左側廣告代碼。分享給大家供大家參考。具體如下：
這里介紹的是JS實現網頁上可點擊展開、關閉的左側廣告代碼，表現形式類似對聯廣告，不過操作方式不一樣，點擊時候會隱藏在屏幕在左側，但是不是完全隱藏，仍顯示一個圖片豎條的廣告，而且點擊“顯示”的時候，它會重新打開廣告，這種廣告可以提高網頁的用戶體驗。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-click-show-close-style-adv-codes/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>網頁上可點擊展開、關閉的左側廣告代碼</title></head><body><div id="Bar1190_big" style="position:absolute;z-index:9;top:10px;left:0px;width:100px;height:300px;"><div id="AD1190" style="width:100px;height:300px;text-align:center;float:none" class="adSpace"><a href="#" target="_blank"><img width="100" height="300" src="images/2401.jpg" alt="" border="0"></a></div><div style="height:18px;width:100px;background:#CCCCCC;text-align:right;line-height:18px;"><a style="font-size:12px;cursor:pointer;" onClick="bar1190_hidden()">關 閉</a> </div></div><div id="Bar1190_small" style="position:absolute;z-index:9;top:10px;display:none;left:0px;width:20px;height:300px;"><div id="AD1190" style="width:20px;height:300px;text-align:center;float:none" class="adSpace"><a href="#" target="_blank"><img width="25px" height="300" src="images/2402.jpg" alt="" border="0"></a></div><div style="height:18px;width:25px;background:#CCCCCC;text-align:right;line-height:18px;"><a style="font-size:12px;cursor:pointer;" onClick="bar1190_show()">展開</a></div></div><script type="text/javascript">function bar1190_show(){document.getElementById('Bar1190_big').style.display='';document.getElementById('Bar1190_small').style.display='none';}function bar1190_hidden(){document.getElementById('Bar1190_big').style.display='none';document.getElementById('Bar1190_small').style.display='';}var autohide1190 = setTimeout("bar1190_hidden()",6000);</script></body></html>希望本文所述對大家的javascript程序設計有所幫助。
新聞熱點
疑難解答
