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 相关文章推荐
JQuery实现自定义对话框的代码
Jun 15 Javascript
jquery 使用点滴函数代码
May 20 Javascript
javascript之Partial Application学习
Jan 10 Javascript
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
Three.js快速入门教程
Sep 09 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
May 03 Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
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判断变量类型常用方法
2012/04/24 PHP
PHP模板解析类实例
2015/07/09 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
纯JS实现轮播图
2017/02/22 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
2017/03/17 Javascript
layui获取多选框中的值方法
2018/08/15 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
小程序中英文混合排序问题解决
2019/08/02 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
关于Python作用域自学总结
2019/06/10 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
pandas分组聚合详解
2020/04/10 Python
浅谈pytorch中的BN层的注意事项
2020/06/23 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
说一下Linux下有关用户和组管理的命令
2014/08/18 面试题
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
网游商务专员求职信
2013/10/15 职场文书
个人职业生涯规划书1500字
2013/12/31 职场文书
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python