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>
<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程序设计有所帮助。
相关文章
在测试时发现firefox不支持innerText，该怎么办呢？其实很简单，本文为大家提供了一个解决方法，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-08
uniapp微信小程序无法获取Vue.prototype值的解决方法
在uniapp开发过程中,各端的一些高度会有区别,为了方便就要统一放到全局变量中,下面这篇文章主要给大家介绍了关于uniapp微信小程序无法获取Vue.prototype值的解决方法,需要的朋友可以参考下2022-10-10
这篇文章主要为大家详细介绍了微信小程序实现animation动画的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
这篇文章主要为大家详细介绍了微信小程序实现星星评价效果，支持多个条目评价，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要介绍了JS定时器如何实现提交成功提示功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-06-06
将HTML格式的String转化为HTMLElement的实现方法
本节主要介绍了将HTML格式的String转化为HTMLElement的实现方法,需要的朋友可以参考下2014-08-08
今天小编就为大家分享一篇关于JS无限级导航菜单实现方法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
关于javaScript注册click事件传递参数的不成功问题
在javaScript中给一个html元素注册click事件处理函数时，比如给该处理函数传3个参数。可是不管是使用下面那种方式都不能给事件处理函数传递参数2014-07-07
我们在开发小程序时，如果想获取用户信息，就需要获取用的授权，如果用户误点了拒绝授权，我们怎么样去正确的引导用户重新授权呢。今天就来给大家讲讲如果正确的引导用户授权,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了javascript简单判断输入内容是否合法的方法,以验证用户名是否为数字与字母组成为例,分析了javascript正则验证的思路与实现方法,需要的朋友可以参考下2016-05-05
最新评论