成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

導航首頁 ? 技術教程 ? jQuery實現可關閉固定于底(頂)部的工具條菜單效果
全站頭部文字 我要出現在這里
jQuery實現可關閉固定于底(頂)部的工具條菜單效果 610 2024-03-22   

本文實例講述了jQuery實現可關閉固定于底(頂)部的工具條菜單效果。分享給大家供大家參考,具體如下:

這是一款可關閉始終在頁面底部的工具條菜單,浮動在頁面頂部的大家見的比較多了,本款從形式上來說與其它的沒什么差別,只是浮動在頁面的最底部,帶一關閉按鈕,一般來說,此效果可用作廣告條、網站提示以及一些需要用戶特別注意的地方。

運行效果截圖如下:

查看圖片

在線演示地址如下:

http://demo.gimoo.net/js/2015/jquery-fixed-buttom-adv-line-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>
<script type="text/javascript" src="http://www.gimoo.net/t/1904/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/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/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 ><img src="http://www.gimoo.net/t/1904/images/qqonline.gif"></a><a ><img src="http://www.gimoo.net/t/1904/images/qqonline2.gif"></a>
  </span>
  <dl class="rolltext">
   <dt>特別聲明:</dt>
   <dd>
    <a >慶雙節期間,商城有專人值班,請上帝們放心購物</a>
    <a >天悅所售手機為大陸行貨、全國聯保商品</a>
    <a >部分少量港行、歐行機器我們都已特別注明</a>
    <a >請上帝們就不要再咨詢同類問題啦,客服電話要爆嘍</a>
   </dd>
  </dl>
  <span class="s2">
   <span><a >[登錄]</a><a >[免費注冊]</a></span><a >購物車</a>|<a >幫助中心</a>|<a >在線留言</a>
  </span>
  <span class="close"><a href="javascript:void(0)" onclick="closeNav()" title="關閉">關閉</a></span>
 </div>
</div>
<div class="bnav3 openClose" style="display:none;"><a href="javascript:void(0)" onclick="showNav()" title="打開">打開</a></div>
</body>
</html>

希望本文所述對大家jQuery程序設計有所幫助。



主站蜘蛛池模板: 进击的巨人2| 石川佑希| 电影白上之黑| 电视剧零下三十八度演员表| 公共基础知识1000题及答案| 沉默的羔羊1| 吃大米饭是增肥还是减肥 | 卧虎在线观看| 电视剧狙击手免费全集播放| 文琪演过的电视剧有哪些| 小猪佩奇免费版中文第三季| 爱神的诱惑| 抖音美好生活| 蕾切尔·布罗斯纳罕| 我和我的祖国 五线谱| 黄视频在线网站| 晓彤| 玛姬·格蕾斯| 世界上最有杀气的国歌| 少女频道电影在线观看中文版| 釜山国际电影节| 薄冰电视剧| 男女视频在线播放| 少儿不宜视频| 墨雨云间电视剧| 女生被草视频| 蓝心妍的电影《极乐宝鉴》免费国语| 谢承均| 李泽宇| 少林七崁| 印度电影《情罪》免费观看中文| 抗日电影大突围完整版| 春意视频| cctv16节目单| 男操女视频免费| 一万个伤心的理由| 孤岛惊魂| 刘浩存个人简历资料| 宇宙刑事卡邦| 弟子规电子版(可打印)| 六年级上册数学解方程|

!!!站長長期在線接!!!

網站、小程序:定制開發/二次開發/仿制開發等

各種疑難雜癥解決/定制接口/定制采集等

站長微信:lxwl520520

站長QQ:1737366103