js实现带关闭按钮始终显示在网页最底部工具条的方法


Posted in Javascript onMarch 02, 2015

本文实例讲述了js实现带关闭按钮始终显示在网页最底部工具条的方法。分享给大家供大家参考。具体如下:

这是一款很实用的代码,给网页加入一个始终显示在浏览器窗口底部的工具栏,可以在上面放上公告,联系人等等信息,此代码的工具条还带有关闭按钮,可以随时关闭

<!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="js/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/201008/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/201008/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/201008/qqonline.gif"></a><a href="#"><img src="images/201008/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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
checkbox 复选框不能为空
Jul 11 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
多引号嵌套的变量命名的问题
May 09 Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
全选复选框JavaScript编写小结(附代码)
Aug 16 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
jQuery实现带进度条的轮播图
Sep 13 jQuery
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 Javascript
基于Cesium绘制抛物弧线
Nov 18 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 #Javascript
js实现在网页上简单显示时间的方法
Mar 02 #Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 #Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 #Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 #Javascript
JavaScript定时显示广告代码分享
Mar 02 #Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 #Javascript
You might like
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
javascript第一课
2007/02/27 Javascript
JavaScript 10件让人费解的事情
2010/02/15 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
浅谈JavaScript find 方法不支持IE的问题
2017/09/28 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
python查看微信好友是否删除自己
2016/12/19 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
Python tcp传输代码实例解析
2020/03/18 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
python热力图实现简单方法
2021/01/29 Python
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
女性时尚网购:Chic Me
2019/07/30 全球购物
应急管理培训方案
2014/06/12 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
婚宴致辞
2015/07/28 职场文书
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript