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类型系统之Math
Jan 06 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
vue 表单输入格式化中文输入法异常问题
May 30 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 Javascript
node使用request请求的方法
Dec 20 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
Array.filter中如何正确使用Async
Nov 04 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 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电台频率大全 - 10 江苏省
2020/03/11 无线电
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
JavaScript单元测试ABC
2012/04/12 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
python删除服务器文件代码示例
2018/02/09 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
Python3中exp()函数用法分析
2019/02/19 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
Python获取时间戳代码实例
2019/09/24 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
Linux如何压缩可执行文件
2014/03/27 面试题
linux系统都有哪些运行级别
2016/03/26 面试题
十佳青年事迹材料
2014/08/21 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
公司董事任命书
2015/09/21 职场文书