网站首页
网站导航
Ctrl+D收藏
首 页
代码段
源码包
文档库
工具箱
代码语言
.
CSharp
.
JS
Java
Asp.Net
C
MSSQL
PHP
Css
PLSQL
Python
Shell
EBS
ASP
Perl
ObjC
VB.Net
VBS
MYSQL
GO
Delphi
AS
DB2
Domino
Rails
ActionScript
Scala
代码分类
文件
系统
字符串
数据库
网络相关
图形/GUI
多媒体
算法
游戏
Jquery
Extjs
Android
HTML5
菜单
网页交互
WinForm
控件
企业应用
安全与加密
脚本/批处理
开放平台
其它
【
JS
】
底部工具条,支持动画关闭,Li列表滚动
作者:
沉淀岁月
/ 发布于
2013/9/10
/
344
览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;在实际使用中,不会出现这样的问题。这款网页底部的工具栏基于jQuery版,可关闭,关闭时候还有动画效果呢,另外它还可以让文字滚动,一条一条的公告循环滚动,感觉真不错。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml"> <head> <title>固定在页面底部的滚动公告</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> html,body,div ul{margin:0;padding:0;border:0;font-size:100%;background:transparent;} ul{list-style:none;} a{text-decoration:none;} body{background:#f2f2f2;font:12px 宋体,Verdana,Tahoma,Lucida Grande,Arial,sans-serif;color:#000;} #gg{position:fixed;bottom:0;background:#000;width:100%;height:23px;line-height:23px;z-index:9999;opacity:.60;filter:alpha(opacity=60);_bottom:auto;_width:100%;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));} #gg a{color:#fff;font-size:13px;letter-spacing:2px;} .close a{float:right;margin:0 10px 0 0;padding:0 10px 0 10px;} .bulletin{float:left;height:23px;color:#fff;margin:0 0 0 20px;background:url(/jscss/demoimg/201101/bulletin.gif) no-repeat;min-height:23px;overflow:hidden;} .bulletin li{height:23px;padding-left:25px;} </style> <!--[if IE]> <style type="text/css"> /* 修正IE6振动bug */ html body{background-image:url(about:blank);background-attachment:fixed;} </style> <![endif]--> <script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script> <script type="text/javascript"> (function($){ $.fn.extend({ Scroll:function(opt,callback){ if(!opt) var opt={}; var _this=this.eq(0).find("ul:first"); var lineH=_this.find("li:first").height(), line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), speed=opt.speed?parseInt(opt.speed,10):7000,//卷动速度,数值越大,速度越慢(毫秒) timer=opt.timer?parseInt(opt.timer,10):7000;//滚动的时间间隔(毫秒) if(line==0) line=1; var upHeight=0-line*lineH; scrollUp=function(){ _this.animate({ marginTop:upHeight },speed,function(){ for(i=1;i<=line;i++){ _this.find("li:first").appendTo(_this); } _this.css({marginTop:0}); }); } _this.hover(function(){ clearInterval(timerID); },function(){ timerID=setInterval("scrollUp()",timer); }).mouseout(); } }) })(jQuery); $(document).ready(function(){ $(".bulletin").Scroll({line:1,speed:1000,timer:5000});//修改此数字调整滚动时间 }); </script> </head> <body> <div style="height:2000px;">预览时若有错误,请刷新一下网页。</div> <div id="gg"> <div class="close"><a href="javascript:void(0)" onclick="$('#gg').slideUp('slow');" title="关闭">不想听你唠叨×</a></div> <div class="bulletin"> <ul> <li><a href="/" title="欢迎您" target="_blank">精品源码下载:源码爱好者</a></li> <li><a href="/" title="" target="_blank">为中国站长提供各种建站资源、建站资讯及建站交流平台</a></li> </ul> </div> </div> </body> </html>
评论列表
本站所提供的代码,版权归原作者所有,若有侵犯作者版权,请与我们联系,我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。
试试其它关键字
同语言下
.
Jquery搜索框获取回车事件
.
H5页面添加倒计时,然后自动跳转
.
通过user-agent判断h5页面是在哪个手机App(QQ、微信
.
nginx 禁止未绑定的域名访问
.
JavaScript 获取按键,并屏蔽系统 Window 事件
.
H5之只允许微信浏览器打开,禁止从外部浏览器访问
.
微信打开网址添加在浏览器中打开提示的办法
.
实现JS复制、粘贴,Chrome/Firefox下可用
.
video视频播放,play()、pause()、duration时长、onen
.
HTML5实现MP3上传前的预览和播放时长的获取
可能有用的
.
Jquery搜索框获取回车事件
.
H5页面添加倒计时,然后自动跳转
.
通过user-agent判断h5页面是在哪个手机App(QQ、微信
.
nginx 禁止未绑定的域名访问
.
JavaScript 获取按键,并屏蔽系统 Window 事件
.
H5之只允许微信浏览器打开,禁止从外部浏览器访问
.
微信打开网址添加在浏览器中打开提示的办法
.
实现JS复制、粘贴,Chrome/Firefox下可用
.
video视频播放,play()、pause()、duration时长、onen
.
HTML5实现MP3上传前的预览和播放时长的获取
沉淀岁月
贡献的其它代码
(
39
)
.
CSS置顶页脚
.
CSS跨浏览器透明度
.
timer定时器的用法演示
.
PHP实现网站保存快捷桌面方式
.
定位函数所在模块
.
提示信息的自动隐藏
.
提交表单后禁用提交按钮
.
文本框输入值文字消失
.
批量剪切图片
.
批量生成ETL Automation APP下Perl脚本执行目录
地图
本站
我们
服务
版权
联系
回馈
博客