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 相关文章推荐
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
js遍历子节点子元素附属性及方法
Aug 19 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
详解使用Node.js 将txt文件转为Excel文件
Jul 05 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 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的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
在网页中屏蔽快捷键
2006/09/06 Javascript
JavaScript中常见陷阱小结
2010/04/27 Javascript
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
PHP webshell检查工具 python实现代码
2009/09/15 Python
python单链表实现代码实例
2013/11/21 Python
python解析xml文件操作实例
2014/10/05 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
安全生产先进个人材料
2014/02/06 职场文书
会计核算科岗位职责
2014/03/19 职场文书
授权委托书怎么写
2014/09/25 职场文书
安全生产感想
2015/08/07 职场文书
解决pytorch-gpu 安装失败的记录
2021/05/24 Python
Redis数据同步之redis shake的实现方法
2022/04/21 Redis