javascript橫排豎排標準選項卡效果代碼
1318
2024-04-07
本文實例講述了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程序設計有所幫助。
#免責聲明#
本站[綠夏技術導航]提供的一切軟件、教程和內容信息僅限用于學習和研究目的;不得將上述內容用于商業或者非法用途,否則,一切后果請用戶自負。本站信息來自網絡收集整理,版權爭議與本站無關。您必須在下載后的24個小時之內,從您的電腦或手機中徹底刪除上述內容。如果您喜歡該程序或內容,請支持正版,購買注冊,得到更好的正版服務。我們非常重視版權問題,如有侵權請郵件[admin@lxwl520.com]與我們聯系進行刪除處理。敬請諒解!