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加解密功能页面
Dec 12 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 Javascript
js+canvas绘制五角星的方法
Jan 28 Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
关于Javascript 的 prototype问题。
2007/01/03 Javascript
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
Python的迭代器和生成器
2015/07/29 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
python 读取串口数据的示例
2020/11/09 Python
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
党支部组织生活会整改方案
2014/09/30 职场文书
职称评定个人总结
2015/03/05 职场文书