快捷導(dǎo)航

JS實(shí)現(xiàn)可點(diǎn)擊展開與關(guān)閉的左側(cè)廣告代碼

更新時(shí)間：2015年09月02日 10:28:59 作者：企鵝

這篇文章主要介紹了JS實(shí)現(xiàn)可點(diǎn)擊展開與關(guān)閉的左側(cè)廣告代碼,通過鼠標(biāo)onClick事件調(diào)用自定義javascript函數(shù)實(shí)現(xiàn)頁面元素及樣式的顯示與隱藏效果,非常簡單實(shí)用,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)可點(diǎn)擊展開與關(guān)閉的左側(cè)廣告代碼。分享給大家供大家參考。具體如下：

這里介紹的是JS實(shí)現(xiàn)網(wǎng)頁上可點(diǎn)擊展開、關(guān)閉的左側(cè)廣告代碼，表現(xiàn)形式類似對聯(lián)廣告，不過操作方式不一樣，點(diǎn)擊時(shí)候會隱藏在屏幕在左側(cè)，但是不是完全隱藏，仍顯示一個(gè)圖片豎條的廣告，而且點(diǎn)擊“顯示”的時(shí)候，它會重新打開廣告，這種廣告可以提高網(wǎng)頁的用戶體驗(yàn)。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/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>網(wǎng)頁上可點(diǎn)擊展開、關(guān)閉的左側(cè)廣告代碼</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()">關(guān) 閉</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程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: