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 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
Sep 12 Javascript
js实现收缩菜单效果实例代码
Oct 30 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
原生js的RSA和AES加密解密算法
Oct 08 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
node.js使用stream模块实现自定义流示例
Feb 13 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
详细介绍PHP应用提速面面观
2006/10/09 PHP
PHP编码转换
2012/11/05 PHP
php xml常用函数的集合(比较详细)
2013/06/06 PHP
PHP 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
js中cookie的使用详细分析
2008/05/28 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
nodejs教程之入门
2014/11/21 NodeJs
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
Pandas中resample方法详解
2019/07/02 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
介绍一下木马病毒的种类
2015/07/26 面试题
房屋出租协议书
2014/04/10 职场文书
小学生期末评语大全
2014/04/21 职场文书
父亲节活动总结
2015/02/12 职场文书
监理中标通知书
2015/04/16 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
优秀新员工事迹材料
2019/05/13 职场文书
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL