可關(guān)閉固定底（頂）部的工具條菜單

2024-09-05 12:17:58

字體：大中小

供稿：網(wǎng)友

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

<!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.codefans.net/ajaxjs/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(http://www.codefans.net/jscss/demoimg/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(http://www.codefans.net/jscss/demoimg/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});}// 單行滾動(dòng)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   id="iwvjtn8m0"   class="bnav openClose">    <div   id="iwvjtn8m0"   class="bnav2">        <span id="iwvjtn8m0"    class="s1">            <img src="http://www.codefans.net/jscss/demoimg/201008/qqonline.gif"><img src="http://www.codefans.net/jscss/demoimg/201008/qqonline2.gif">        </span>        <dl class="rolltext">            <dt>特別聲明：</dt>            <dd>                慶雙節(jié)期間，商城有專人值班，請(qǐng)上帝們放心購物                天悅所售手機(jī)為大陸行貨、全國聯(lián)保商品                部分少量港行、歐行機(jī)器我們都已特別注明                請(qǐng)上帝們就不要再咨詢同類問題啦，客服電話要爆嘍            </dd>        </dl>        <span id="iwvjtn8m0"    class="s2">            <span>[登錄][免費(fèi)注冊(cè)]</span>購物車|幫助中心|在線留言        </span>        <span id="iwvjtn8m0"    class="close">關(guān)閉</span>    </div></div><div   id="iwvjtn8m0"   class="bnav3 openClose" style="display:none;">打開</div></body></html>

上一篇：Js+CSS打造兼容firefox的offsetX

下一篇：最簡方法實(shí)現(xiàn)JavaScript圖片上傳預(yù)覽功能