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

更新时间：2015年03月02日 15:15:57 作者：站长学院

这篇文章主要介绍了js实现带关闭按钮始终显示在网页最底部工具条的方法,是非常实用的javascript固定效果,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

JS 加入收藏夹的代码(主流浏览器通用)
所有浏览器通用的js添加收藏夹代码，本文整理了多种方法实现加入收藏夹功能，下面为大家详细介绍下实现代码，感兴趣的朋友可以参考下哈
2013-05-05
ionic 自定义弹框效果
这篇文章主要介绍了ionic 自定义弹框效果，非常不错，具有参考借鉴价值,需要的朋友可以参考下
2017-06-06
javascript面向对象之访问对象属性的两种方式分析
这篇文章主要介绍了javascript面向对象之访问对象属性的两种方式分析,实例分析了直接访问对象属性的方式与数组访问方式,需要的朋友可以参考下
2015-01-01
使用JS调用工控机(Windows)虚拟键盘
在工控机触摸屏中,通过浏览器web端进行表单输入,当聚焦表单输入框并不会出现虚拟键盘进行输入,本文介绍将给大家介绍如何通过js调用工控机(Windows)虚拟键盘,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
2024-01-01
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
这篇文章主要介绍了解决idea开发遇到javascript动态添加html元素时中文乱码的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-09-09
Bootstrap进度条组件知识详解
在网页中，经常见到进度条效果，那么这些个性的进度条组件效果是怎么实现的呢，下面脚本之家小编给大家分享Bootstrap进度条组件知识详解，感兴趣的朋友要求学习吧
2016-05-05
JavaScript初学者容易犯的几个错误
JavaScript 是对初学者比较友好的一门编程语言，基本上花个半小时看下语法就能写出能运行的代码。JavaScript 是动态脚本语言，对数据类型没有太多的限制，写起来非常灵活。但正因为如此，初学者如果不深入了解语言本身，往往会犯一些错误，从而导致一些很难发现的 bug。
2021-05-05
Js自动截取字符串长度,添加省略号(……)的实现方法
下面小编就为大家带来一篇Js自动截取字符串长度,添加省略号(……)的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03
js实现同一页面多个运动效果的方法
这篇文章主要介绍了js实现同一页面多个运动效果的方法,涉及javascript操作页面元素运动效果的技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04
js导出格式化的excel 实例方法
最常见的方式是使用js函数操作excle文件，这种方式可能因浏览器不同，存在兼容性问题。另一种简单方法就是导出一个excel能识别格式的xml文件，用excel打开。
2013-07-07