jQuery实现可关闭固定于底（顶）部的工具条菜单效果

时间：2021-05-26

本文实例讲述了jQuery实现可关闭固定于底（顶）部的工具条菜单效果。分享给大家供大家参考，具体如下：

这是一款可关闭始终在页面底部的工具条菜单，浮动在页面顶部的大家见的比较多了，本款从形式上来说与其它的没什么差别，只是浮动在页面的最底部，带一关闭按钮，一般来说，此效果可用作广告条、网站提示以及一些需要用户特别注意的地方。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.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="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;_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); 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;_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); 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 href="#"><img src="images/qqonline.gif"></a><a href="#"><img src="images/qqonline2.gif"></a> </span> <dl class="rolltext"> <dt>特别声明：</dt> <dd> <a href="#">庆双节期间，商城有专人值班，请上帝们放心购物</a> <a href="#">天悦所售手机为大陆行货、全国联保商品</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="关闭">关闭</a></span> </div></div><div class="bnav3 openClose" style="display:none;"><a href="javascript:void(0)" onclick="showNav()" title="打开">打开</a></div></body></html>

希望本文所述对大家jQuery程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章