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


Posted in Javascript onNovember 06, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 参考教程
Dec 29 Javascript
javascript 写类方式之八
Jul 05 Javascript
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
详解如何为你的angular app构建一个第三方库
Dec 07 Javascript
解决layer.prompt无效的问题
Sep 24 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 Javascript
JS实现的自定义网页拖动类
Nov 06 #Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 #Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 #Javascript
javascript中的altKey 和 Event属性大全
Nov 06 #Javascript
JS日期加减,日期运算代码
Nov 05 #Javascript
程序员必知35个jQuery 代码片段
Nov 05 #Javascript
js如何实现淡入淡出效果
Nov 18 #Javascript
You might like
php用正则判断是否为数字的方法
2016/03/25 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
JS继承--原型链继承和类式继承
2013/04/08 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
jquery分页对象使用示例
2014/04/01 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
js实现碰撞检测
2021/01/29 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
python实现html转ubb代码(html2ubb)
2014/07/03 Python
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
django表单的Widgets使用详解
2019/07/22 Python
python数组循环处理方法
2019/08/26 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
阿拉伯书店:Jamalon
2019/07/24 全球购物
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
安全检查与奖惩制度
2014/01/23 职场文书
珠宝店促销方案
2014/03/21 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
调研座谈会发言材料
2014/08/23 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书