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

前端技术 2023/09/02 JavaScript

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.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;/* 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 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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/4605

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案