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特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" /> <meta name="description" content="www.zzjs.net,站长特效网,站长必备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_zzjs_net{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_zzjs_net a{color:#fff;font-size:13px;letter-spacing:2px;} .close a{float:right;margin:0 10px 0 0;padding:0 10px 0 10px;} .zzjs__net{float:left;height:23px;color:#fff;margin:0 0 0 20px;background:url(/img/20111126wwwzzjsnet_12.gif) no-repeat;min-height:23px;overflow:hidden;} .zzjs__net 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_zzjs.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(){ $(".zzjs__net").Scroll({line:1,speed:1000,timer:5000});//修改此数字调整滚动时间 });//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,.net打造靓站,还有许多广告代码下载。 </script> </head> <body> <div style="height:2000px;"> <a href="http://www.zzjs.net/">站长特效网</a>,以质量为核心,以实用为目的,打造一流网页特效站!zzjs.net,站长js特效。<hr> <!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,zzjs@msn.com,用.net打造靓站--> <script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script> 需要加载js文件,请刷新页面后看效果! </div> <div id="www_zzjs_net"> <div class="close"><a href="javascript:void(0)" onclick="$('#www_zzjs_net').slideUp('slow');" title="关闭">点击这里关闭×</a></div> <div class="zzjs__net"> <ul> <li><a href="http://www.zzjs.net" title="站长特效网一号广告" target="_blank">一号,站长特效网,以质量为核心,以实用为目的,打造中国一流网页特效资源站点!</a></li> <li><a href="http://www.zzjs.net" title="站长特效网二号广告" target="_blank">二号,站长特效网,以质量为核心,以实用为目的,打造中国一流网页特效资源站点!</a></li> <li><a href="http://www.zzjs.net" title="站长特效网三号广告" target="_blank">三号,站长特效网,以质量为核心,以实用为目的,打造中国一流网页特效资源站点!</a></li> </ul> </div> </div> </body> </html>
提示:你可以先修改部分代码再运行。
标签:
南宁电脑维修培训,笔记本芯片级维修,笔记本维修,芯片级维修培训,南宁电脑上门维修,南宁二手笔记本!
姓名 (必填)
邮件 (必填)
验证 (3+8)