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 相关文章推荐
JavaScript入门教程(12) js对象化编程
Jan 31 Javascript
js倒计时小程序
Nov 05 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
jquery实现倒计时效果
Dec 14 Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
js实现无缝轮播图
Mar 09 Javascript
Node实现搜索框进行模糊查询
Jun 28 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
什么是短波收听SWL
2021/03/01 无线电
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
PHP制作用户注册系统
2015/10/23 PHP
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
JS库之Particles.js中文开发手册及参数详解
2017/09/13 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
vue实现分页栏效果
2019/06/28 Javascript
javascript实现计算器功能
2020/03/30 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
详解Python中find()方法的使用
2015/05/18 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
工作态度检讨书
2014/02/11 职场文书
工程售后服务方案
2014/06/08 职场文书
员工年终考核评语
2014/12/31 职场文书
圣诞节开幕词
2015/01/29 职场文书
项目投资意向书范本
2015/05/09 职场文书
工作证明书
2015/06/15 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers