快捷導(dǎo)航

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

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

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

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

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

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

在JavaScript中使用mqtt.js的詳細(xì)過(guò)程
這篇文章主要介紹了在JavaScript中使用mqtt.js的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-04-04
深入理解JavaScript的值傳遞和引用傳遞
JavaScript有5種基本的數(shù)據(jù)類型，分別是：布爾、null、undefined、String和Number。這篇文章主要介紹了JavaScript的值傳遞和引用傳遞,需要的朋友可以參考下
2018-10-10
JavaScript jquery及AJAX小結(jié)
其實(shí)在學(xué)習(xí)之前，就已經(jīng)用上了js，jquery和ajax，不過(guò)當(dāng)時(shí)不清楚這些的區(qū)別，就全都當(dāng)成js來(lái)看，然后別人一說(shuō)jquery，ajax都覺(jué)得好像很高級(jí)，等到自己學(xué)習(xí)的時(shí)候，倒是對(duì)這些更清楚了一點(diǎn)，下面就來(lái)寫一下我的總結(jié)
2016-01-01
ES6解構(gòu)賦值(數(shù)組,對(duì)象,函數(shù))使用詳解
這篇文章主要介紹了ES6解構(gòu)賦值(數(shù)組,對(duì)象,函數(shù))使用詳解,JavaScript 中最常用的兩種數(shù)據(jù)結(jié)構(gòu)是 Object 和 Array，解構(gòu)操作對(duì)那些具有很多參數(shù)和默認(rèn)值等的函數(shù)也很奏效，本文通過(guò)實(shí)例代碼詳細(xì)講解需要的朋友可以參考下
2022-11-11
npm install報(bào)錯(cuò)無(wú)法創(chuàng)建packge.json文件的解決辦法
當(dāng)你在運(yùn)行 npm install 時(shí)遇到錯(cuò)誤,提示無(wú)法找到 package.json 文件,也沒(méi)有創(chuàng)建一個(gè) package.json 文件,只創(chuàng)建了一個(gè)package-lock.json文件,本文給大家介紹詳細(xì)的解決辦法,需要的朋友可以參考下
2024-02-02
javascript 用函數(shù)語(yǔ)句和表達(dá)式定義函數(shù)的區(qū)別詳解
本篇文章主要介紹了javascript 用函數(shù)語(yǔ)句和表達(dá)式定義函數(shù)的區(qū)別。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-01-01
js 獲取元素在頁(yè)面上的偏移量的方法匯總
javascript可以通過(guò)四個(gè)屬性可以獲得元素的偏移量，分別是1、offsetHeight，2、offsetWidth，3、offsetLeft，4、offsetTop，今天我們就來(lái)具體談一下獲取頁(yè)面元素偏移量的最佳方法。
2015-04-04
用javascript實(shí)現(xiàn)模擬火焰
用javascript實(shí)現(xiàn)模擬火焰...
2007-10-10
JS實(shí)現(xiàn)圖片局部放大或縮小的方法
這篇文章主要介紹了JS實(shí)現(xiàn)圖片局部放大或縮小的方法,涉及javascript事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下
2016-08-08
JS實(shí)現(xiàn)頁(yè)面打?。ㄕw、局部）
本篇文章主要介紹了JS實(shí)現(xiàn)頁(yè)面打?。ㄕw、局部），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08