欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實現(xiàn)帶關(guān)閉按鈕始終顯示在網(wǎng)頁最底部工具條的方法

 更新時間:2015年03月02日 15:15:57   作者:站長學院  
這篇文章主要介紹了js實現(xiàn)帶關(guān)閉按鈕始終顯示在網(wǎng)頁最底部工具條的方法,是非常實用的javascript固定效果,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了js實現(xiàn)帶關(guān)閉按鈕始終顯示在網(wǎng)頁最底部工具條的方法。分享給大家供大家參考。具體如下:

這是一款很實用的代碼,給網(wǎng)頁加入一個始終顯示在瀏覽器窗口底部的工具欄,可以在上面放上公告,聯(lián)系人等等信息,此代碼的工具條還帶有關(guān)閉按鈕,可以隨時關(guān)閉

復制代碼 代碼如下:
<!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>
<script type="text/javascript" src="js/jquery1.3.2.js"></script>
<style>
body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;}
li{list-style:none;}img{border:none;}em{font-style:normal;}
a{color:#555;text-decoration:none;outline:none;blr:this.onFocus=this.blur();}
a:hover{color:#000;text-decoration:underline;}
body{font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;}
.bnav{ text-align:left;height:25px;overflow:hidden;width:98%;line-height:25px;background:#fff; margin:0 1%;border:#B4B4B4 1px solid; border-bottom:none;z-index:999;position:fixed;bottom:0;left:0;_position:absolute;/* for IE6 */_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */ overflow:visible;}
.close{position:absolute;right:5px;height:25px;width:16px;text-indent:-9999px;padding-left:10px;}
.close a{background:url(../images/201008/close.gif) no-repeat center; width:16px;display:block;}
.bnav2{height:24px;line-height:24px; margin:1px; margin-bottom:0;background:#E5E5E5; }
.bnav .s1{ position:absolute;left:10px;}
.bnav .s1 img{ padding-top:3px;margin-right:7px;}
.bnav .s2{ position:absolute;right:30px; color:#888;}
.bnav .s2 span{ padding-right:10px;}
.bnav .s2 a{margin:0 6px;}
.rolltext{position:absolute;left:160px;height:25px;line-height:25px; overflow: hidden;}
.rolltext dt,.rolltext dd{float:left;width: auto;}
.rolltext a{display:block;height:25px;overflow:hidden;}
.bnav3{height:25px;width:16px;line-height:25px; margin:0 1%; padding-right:6px;border-bottom:none;z-index:999;position:fixed;bottom:0;right:0;_position:absolute;/* for IE6 */_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */ overflow:visible;}
.bnav3 a{background:url(../images/201008/open.gif) no-repeat center; display:block;height:25px;width:16px; text-indent:-5000px;}
</style>
</head>
<body>
<script type="text/javascript">
var closeBN = $.cookie("bnav");
if (closeBN == "0"){closeNav();}
function showNav(){
$(".openClose").toggle();
$.cookie("bnav", "1", {expires: 1});
}
function closeNav(){
$(".openClose").toggle();
$.cookie("bnav", "0", {expires: 1});
}
// 單行滾動
function SingleScroll(){
$(".rolltext dd").animate({marginTop:"-25px"},500,function(){
$(this).css({marginTop:"0px"}).find("a:first").appendTo(this);
});
}
$(document).ready(function(){
setInterval("SingleScroll()",3000);
});
</script>
<div class="bnav openClose">
<div class="bnav2">
<span class="s1">
<a href="#"><img src="images/201008/qqonline.gif"></a><a href="#"><img src="images/201008/qqonline2.gif"></a>
</span>
<dl class="rolltext">
<dt>特別聲明:</dt>
<dd>
<a href="#">慶雙節(jié)期間,商城有專人值班,請上帝們放心購物</a>
<a href="#">天悅所售手機為大陸行貨、全國聯(lián)保商品</a>
<a href="#">部分少量港行、歐行機器我們都已特別注明</a>
<a href="#">請上帝們就不要再咨詢同類問題啦,客服電話要爆嘍</a>
</dd>
</dl>
<span class="s2">
<span><a href="#">[登錄]</a><a href="#">[免費注冊]</a></span><a href="#">購物車</a>|<a href="#">幫助中心</a>|<a href="#">在線留言</a>
</span>
<span class="close"><a href="javascript:void(0)" onclick="closeNav()" title="關(guān)閉">關(guān)閉</a></span>
</div>
</div>
<div class="bnav3 openClose" style="display:none;"><a href="javascript:void(0)" onclick="showNav()" title="打開">打開</a></div>
</body>
</html>

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

相關(guān)文章

  • 簡單聊聊TypeScript只讀修飾符

    簡單聊聊TypeScript只讀修飾符

    有的時候我們希望對類成員(屬性,方法)進行一定的訪問控制,來保證數(shù)據(jù)的安全,通過類修飾符可以做到這一點,目前typescript提供了四種修飾符,這篇文章主要給大家介紹了關(guān)于TypeScript只讀修飾符的相關(guān)資料,需要的朋友可以參考下
    2022-04-04
  • 淺談js函數(shù)的多種定義方法與區(qū)別

    淺談js函數(shù)的多種定義方法與區(qū)別

    下面小編就為大家?guī)硪黄獪\談js函數(shù)的多種定義方法與區(qū)別。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-11-11
  • typescript中高級類型Record詳解

    typescript中高級類型Record詳解

    這篇文章主要介紹了typescript中高級類型Record,ts文檔上對Record的介紹不多,但卻經(jīng)常用到,Record是一個很好用的工具類型,本文給大家詳細講解需要的朋友可以參考下
    2022-11-11
  • 5個你不知道的JavaScript字符串處理庫(小結(jié))

    5個你不知道的JavaScript字符串處理庫(小結(jié))

    這篇文章主要介紹了5個你不知道的JavaScript字符串處理庫,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-06-06
  • JS實現(xiàn)的表格行上下移動操作示例

    JS實現(xiàn)的表格行上下移動操作示例

    這篇文章主要介紹了JS實現(xiàn)的表格行上下移動操作,涉及javascript針對頁面元素節(jié)點與屬性的相關(guān)操作技巧,需要的朋友可以參考下
    2016-08-08
  • 使用Three.js?實現(xiàn)虎年春節(jié)3D創(chuàng)意頁面

    使用Three.js?實現(xiàn)虎年春節(jié)3D創(chuàng)意頁面

    虎年春節(jié)將至,本文使用?React?+?Three.js技術(shù)棧,實現(xiàn)趣味?3D創(chuàng)意頁面,主要包括:ShadowMaterial、?MeshPhongMaterial等基本材質(zhì)的使用、使用?LoadingManager展示模型加載進度、OrbitControls`的緩動動畫、TWEEN簡單補間動畫效果等,感興趣的朋友一起看看吧
    2022-01-01
  • js實現(xiàn)列表自動滾動循環(huán)播放

    js實現(xiàn)列表自動滾動循環(huán)播放

    這篇文章主要為大家詳細介紹了js實現(xiàn)列表自動滾動循環(huán)播放,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • javascript實現(xiàn)用戶點擊數(shù)量統(tǒng)計

    javascript實現(xiàn)用戶點擊數(shù)量統(tǒng)計

    本文主要javascript實現(xiàn)用戶點擊數(shù)量統(tǒng)計的方法進行詳細介紹,具有很好的參考價值,需要的朋友一起來看下吧
    2016-12-12
  • Summernote實現(xiàn)圖片上傳功能的簡單方法

    Summernote實現(xiàn)圖片上傳功能的簡單方法

    下面小編就為大家?guī)硪黄猄ummernote實現(xiàn)圖片上傳功能的簡單方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-07
  • 原生Js實現(xiàn)的畫廊功能

    原生Js實現(xiàn)的畫廊功能

    這篇文章主要介紹了原生Js實現(xiàn)的畫廊功能,幫助大家更好的理解和學習使用JavaScript,感興趣的朋友可以了解下
    2021-05-05

最新評論