<!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=utf-8" /> <title>jQuery文字无缝滚动效果代码</title> <style type="text/css"> *{margin:0;padding:0;font-size:12px;} input,button,select,textarea{outline:none;} ul,li,dl,ol{list-style:none;} a{color:#666;text-decoration:none;} .bcon{ width:270px; border:1px solid #eee; margin:30px auto; } .bcon h2{ border-bottom:1px solid #eee; padding:0 10px; } .bcon h2 b{ font:bold 14px/40px '宋体'; padding:0 8px; display:inline-block; } .list_lh{ height:400px; overflow:hidden; } .list_lh li{ height:68px; line-height:68px; } .list_lh li.lieven{ background:#F0F2F3; } .btn_lh:hover{ color:#fff; text-decoration:none; } </style> <body> <div class="bcon"> <h2><b>领号实时播报</b></h2> <div class="list_lh"> <ul> <li><a href="#">网游战江湖公测豪华礼包1</a></li> <li><a href="#">网游战江湖公测豪华礼包2</a></li> <li><a href="#">网游战江湖公测豪华礼包3</a></li> <li><a href="#">网游战江湖公测豪华礼包4</a></li> <li><a href="#">网游战江湖公测豪华礼包5</a></li> <li><a href="#">网游战江湖公测豪华礼包6</a></li> <li><a href="#">网游战江湖公测豪华礼包7</a></li> <li><a href="#">网游战江湖公测豪华礼包8</a></li> </ul> </div> </div> <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script> <script type="text/javascript" src="scroll.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.list_lh li:even').addClass('lieven'); $("div.list_lh").myScroll({ speed:40, //数值越大，速度越慢 rowHeight:68 //li的高度 }); }) </script> </body> </html>
(function($){ $.fn.myScroll = function(options){ //默认配置 var defaults = { speed:40, //滚动速度,值越大速度越慢 rowHeight:24 //每行的高度 }; var opts = $.extend({}, defaults, options),intId = []; function marquee(obj, step){ obj.find("ul").animate({ marginTop: '-=1' },0,function(){ var s = Math.abs(parseInt($(this).css("margin-top"))); if(s >= step){ $(this).find("li").slice(0, 1).appendTo($(this)); $(this).css("margin-top", 0); } }); } this.each(function(i){ var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this); intId[i] = setInterval(function(){ if(_this.find("ul").height()<=_this.height()){ clearInterval(intId[i]); }else{ marquee(_this, sh); } }, speed); _this.hover(function(){ clearInterval(intId[i]); },function(){ intId[i] = setInterval(function(){ if(_this.find("ul").height()<=_this.height()){ clearInterval(intId[i]); }else{ marquee(_this, sh); } }, speed); }); }); } })(jQuery);
运行效果图
