网站广播插件 – 有爱前端

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>网站广播插件</title> <style type="text/css"> .bulletin { background: rgba(0, 0, 0, 0) url("http://www.jq22.com/demo/ppker-150618132038/images/bulletin.gif") no-repeat scroll 0 0; color: #fff; float: left; height: 23px; margin: 0 0 0 20px; min-height: 23px; overflow: hidden; } .bulletin a { float: left; } .bulletin li { height: 23px; padding-left: 25px; } a{ text-decoration:none; } #gg li a:hover{ color:red; } ul li{ list-style-type:none; } </style> </head> <body> <div class="bulletin"> <ul style="margin-top: 0px;"> <li> <a href="#" title="文艺范早安晚安心语：黑夜里代替阳光的东西是信念">文艺范早安晚安心语：黑夜里代替阳光的东西是信念——写的真好，详情点击这里</a> </li> <li> <a href="#" title="关于青春、海边唯美的图片">关于青春、海边唯美的图片——我想给你全部全部的希望及光芒，免你忧伤赐你一腔孤勇闯向远方</a> </li> <li> <a href="#" title="[优美文章]过一个冷暖自知的冬天">[优美文章]过一个冷暖自知的冬天——守着自己的小小天地，过着属于自己的小日子，亦可清欢。</a> </li> <li> <a href="#" title="文艺范手绳编织技巧，各种精美好看的绳结~">文艺范手绳编织技巧，各种精美好看的绳结~</a> </li> <li> <a href="#" title="原创句子吧关于爱情的经典语录">原创句子吧关于爱情的经典语录</a> </li> </ul> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> /* * author ppker * date: 2015-6-12 * version: 1.0 * qq: 1366525100 */ (function($){ $.fn.extend({ Scroll:function(opt,callback){ if(!opt) var opt={}; var oo; var _this=this.eq(0).find("ul:first"); var lineH=_this.find("li:first").height(),//23 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 // <li>的margin-top },speed,function(){ for(i=1;i<=line;i++){ _this.find("li:first").appendTo(_this); } _this.css({marginTop:0}); } ); }; var timerID = function(){ oo =setInterval("scrollUp()",timer); }; timerID(); _this.hover(function(){ clearInterval(oo); },function(){ timerID(); }).mouseout(function(){ $('body').css({'background-color':'#aecdef'}); }); } }); })(jQuery); </script> <script type="text/javascript"> /*用法*/ $(document).ready(function(){ $(".bulletin").Scroll({line:1,speed:1000,timer:2000});//修改此数字调整滚动状态 }); </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 网站广播插件