本文讲述了jQuery可以关闭固定在底部(顶部)的工具栏菜单效果的例子。分享给大家参考，如下：

这是一个工具栏菜单，可以在页面底部关闭。有很多人看到它漂浮在页面的顶部。这个部分在形式上与其他部分没有什么不同。它只是浮动在页面底部，带有一个关闭按钮。一般来说，这种效果可以作为广告栏、网站提示以及一些需要用户特别关注的地方。

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/jquery-fixed-buttom-adv-line-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题固定底（顶)部菜单/title脚本类型=' text/JavaScript ' src=' http : jquery 1。3 .2 .js '/脚本样式正文，h1，h2，h3，h4，h5，h6，p，ul，li，dl，dt，DD { padd :0 margin :0 } Li { list-style : none；} img { border : none } em { font-style : normal；} a { color: # 555文本装饰：无；outline:noneBLR :这个。onfocus=这个。blur()；} a:hover { color: # 000文本修饰：下划线；}正文{ font-size :12 pxHelvetica凡尔登纳阿里亚尔，无衬线；断字：断字；单词包装：断字；}.bnav { text-align : left高度：25px飞越：隐藏；宽度：98%;线高：25 px背景# fff保证金：0 1%;border: # B4B4B4 1px实心；边框-底部：无；z指数：999;位置：固定；底部：0;left :0 _ position : absolute/*对于IE6 */_top:表达式(文档元素。滚动顶部文档元素。客户身高-这个。右偏)；/*代表IE6 */溢出：可见；}.关闭{ position : absolute eright :5 pxh8 :25 px宽度：16 px文本-缩进：-9999像素；填充-左侧：10 px}.关闭{背景： URL(图片/关闭。gif)无重复中心；宽度：16 px显示：块；} .bnav 2 {高度：24 px线高：24 pxmargin:1px保证金-底部：0;背景# E5E5E5}。bnav . S1 { position : absolute eleft :10 px }。bnav。S1 img {填充-top :3 px；右边距：7 px}.bnav . S2 { position : absolute eright :30 pxcolor : # 888 }。bnav。S2 span {填充-右侧：10 px}.bnav .s2 a { margin:0 6px }。滚动文本{位置：绝对；左侧：160像素8:25像素线高：25 px飞越：隐藏；}.rolltext dt .rolltext dd { float:left宽度：自动；}.roll text a { display : block height :25 px飞越：隐藏；} .bnav 3 {高度：25 px宽度：16 px线高：25 px保证金：0 1%;填充-右侧：6 px边框-底部：无；z指数：999;位置：固定；底部：0;right :0 _ position : absolute/*对于IE6 */_top:表达式(文档元素。滚动顶部文档元素。客户身高-这个。右偏)；/*代表IE6 */溢出：可见；} .bnav 3 a {背景： URL(图片/打开。gif)无重复中心；显示：块；高度：25px宽度：16 px文本缩进：-5000像素；}/style/head discript type=' text/JavaScript ' var closeBN=$ .cookie(' bnav ')；if(closeBN==' 0 '){ closeNav()；}函数showNav(){ $(' .打开关闭').toggle()；$.cookie('bnav '，' 1 '，{ expires : 1 })；}函数closeNav(){ $(' .打开关闭').toggle()；$.cookie('bnav '，' 0 '，{ expires : 1 })；}//单行滚动函数singlesroll(){ $(').rolltext dd ').animate({ marginto p : '-25px ' }，500，function(){ $(this).css({marginTop:'0px'}).find('a:first ').appendTo(这个);});}$(文档)。ready(function(){ setInterval(' single scroll()'，3000)；});/script div class=' bnav OpenCLose ' div class=' bnav 2 ' span class=' S1 ' a href=' # ' img src=' http : images/QQ online。gif '/aa href=' # ' img src=' http : images/QQ online 2。gif/a/span dl class=' roll text ' dt特别声明：/dt dd a href='# '庆双节期间，商城有专人值班，请上帝们放心购物/a a href='# '天悦所售手机为大陆行货、全国联保商品/a a href='# '部分少量港行、欧行机器我们都已特别注明/a a href='# '请上帝们就不要再咨询同类问题啦，客服电话要爆喽/a/DD/dl span class=' S2 ' span a href=' # '[登录]/aa href='#'[免费注册]/a/spana href='# '购物车/a|a href='# '帮助中心/a|a href='# '在线留言/a/span class=' close ' a href=' JavaScript : void(0)' onclick=' closeNav()' title='关闭'关闭/a/span/div/div class=' bnav 3 OpenCLose ' style=' display : none；'a href=' JavaScript : void(0)' ' onclick=' ShowNav()' title='打开'打开/a/div/body/html希望本文所述对大家jQuery程序设计有所帮助。