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 相关文章推荐
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
JavaScript中的类继承
Nov 25 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 Javascript
js 动态生成json对象、时时更新json对象的方法
Dec 02 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
js使用generator函数同步执行ajax任务
Sep 05 Javascript
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
Vue表单控件数据绑定方法详解
Feb 05 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读取zip文件的方法示例
2016/11/17 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
JavaScript中的Location地址对象
2008/01/16 Javascript
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
Python功能键的读取方法
2015/05/28 Python
python和bash统计CPU利用率的方法
2015/07/10 Python
基于Python实现文件大小输出
2016/01/11 Python
python去除文件中重复的行实例
2018/06/29 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
python中eval与int的区别浅析
2019/08/11 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
简历中自我评价范文3则
2013/12/14 职场文书
个人求职信范例
2014/01/29 职场文书
会计学生自我鉴定
2014/02/06 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
村干部承诺书
2014/03/28 职场文书
教师节宣传方案
2014/05/23 职场文书
会计岗位职责
2015/02/03 职场文书
Go语言应该什么情况使用指针
2021/07/25 Golang
js 实现验证码输入框示例详解
2022/09/23 Javascript