jquery实现网页底部图层定位特效，图层内多行文字定时滚动，这个图层带有关闭按钮按钮供用户使用。
<!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>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>悬浮层定位网页底部滚动公告效果_武鸣人</title>
<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;}
/** 公告 **/
#www_wuming_ren{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)));}
#www_wuming_ren a{color:#fff;font-size:13px;letter-spacing:2px;}
.close a{float:right;margin:0 10px 0 0;padding:0 10px 0 10px;}
.wuming_ren{float:left;height:23px;color:#fff;margin:0 0 0 20px;background:url(/img/20240303_www_wuming_ren.gif) no-repeat;min-height:23px;overflow:hidden;}
.wuming_ren 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="/img/jquery_wuming_ren.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(){
$(".wuming_ren").Scroll({line:1,speed:1000,timer:5000});//修改此数字调整滚动时间
});//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</head>
<body>
<div style="height:2000px;">
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
需要加载js文件，请刷新页面后看效果！
</div>
<div id="www_wuming_ren">
<div class="close"><a href="javascript:void(0)" onclick="$('#www_wuming_ren').slideUp('slow');" title="关闭">点击这里关闭×</a></div>
<div class="wuming_ren">
<ul>
<li><a href="https://www.wuming.ren" title="武鸣人一号广告" target="_blank">一号，武鸣人，努力是一种状态，与年龄无关，越努力越幸运，越自律越优秀！</a></li>
<li><a href="https://www.wuming.ren" title="武鸣人二号广告" target="_blank">二号，武鸣人，努力是一种状态，与年龄无关，越努力越幸运，越自律越优秀！</a></li>
<li><a href="https://www.wuming.ren" title="武鸣人三号广告" target="_blank">三号，武鸣人，努力是一种状态，与年龄无关，越努力越幸运，越自律越优秀！</a></li>
</ul>
</div>
</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处