JS實現(xiàn)可點擊展開與關閉的左側(cè)廣告代碼
更新時間：2015年09月02日 10:28:59 作者：企鵝
這篇文章主要介紹了JS實現(xiàn)可點擊展開與關閉的左側(cè)廣告代碼,通過鼠標onClick事件調(diào)用自定義javascript函數(shù)實現(xiàn)頁面元素及樣式的顯示與隱藏效果,非常簡單實用,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)可點擊展開與關閉的左側(cè)廣告代碼。分享給大家供大家參考。具體如下：
這里介紹的是JS實現(xiàn)網(wǎng)頁上可點擊展開、關閉的左側(cè)廣告代碼，表現(xiàn)形式類似對聯(lián)廣告，不過操作方式不一樣，點擊時候會隱藏在屏幕在左側(cè)，但是不是完全隱藏，仍顯示一個圖片豎條的廣告，而且點擊“顯示”的時候，它會重新打開廣告，這種廣告可以提高網(wǎng)頁的用戶體驗。
運行效果截圖如下：
在線演示地址如下：
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)頁上可點擊展開、關閉的左側(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()">關 閉</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程序設計有所幫助。
相關文章
這篇文章主要介紹了在JavaScript中使用mqtt.js的相關知識，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
JavaScript有5種基本的數(shù)據(jù)類型，分別是：布爾、null、undefined、String和Number。這篇文章主要介紹了JavaScript的值傳遞和引用傳遞,需要的朋友可以參考下2018-10-10
其實在學習之前，就已經(jīng)用上了js，jquery和ajax，不過當時不清楚這些的區(qū)別，就全都當成js來看，然后別人一說jquery，ajax都覺得好像很高級，等到自己學習的時候，倒是對這些更清楚了一點，下面就來寫一下我的總結(jié)2016-01-01
ES6解構(gòu)賦值(數(shù)組,對象,函數(shù))使用詳解
這篇文章主要介紹了ES6解構(gòu)賦值(數(shù)組,對象,函數(shù))使用詳解,JavaScript 中最常用的兩種數(shù)據(jù)結(jié)構(gòu)是 Object 和 Array，解構(gòu)操作對那些具有很多參數(shù)和默認值等的函數(shù)也很奏效，本文通過實例代碼詳細講解需要的朋友可以參考下2022-11-11
npm install報錯無法創(chuàng)建packge.json文件的解決辦法
當你在運行 npm install 時遇到錯誤,提示無法找到 package.json 文件,也沒有創(chuàng)建一個 package.json 文件,只創(chuàng)建了一個package-lock.json文件,本文給大家介紹詳細的解決辦法,需要的朋友可以參考下2024-02-02
javascript 用函數(shù)語句和表達式定義函數(shù)的區(qū)別詳解
本篇文章主要介紹了javascript 用函數(shù)語句和表達式定義函數(shù)的區(qū)別。需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
javascript可以通過四個屬性可以獲得元素的偏移量，分別是1、offsetHeight，2、offsetWidth，3、offsetLeft，4、offsetTop，今天我們就來具體談一下獲取頁面元素偏移量的最佳方法。2015-04-04
用javascript實現(xiàn)模擬火焰...2007-10-10
這篇文章主要介紹了JS實現(xiàn)圖片局部放大或縮小的方法,涉及javascript事件響應及頁面元素動態(tài)操作相關技巧,需要的朋友可以參考下2016-08-08
本篇文章主要介紹了JS實現(xiàn)頁面打?。ㄕw、局部），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08