jQuery多行文字无缝滚动

《jQuery多行文字无缝滚动》正文开始，本次阅读大概10分钟。

还是在写zblogPHP主题ydblack需要加入一个滚动特效，找到的方法！

之前写过一篇关于jQuery单行文字滚动特效的三种样式！

多行滚动HTML：

!DOCTYPEhtml
html
head
metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/
titlejQuery无缝向上滚动/title
style
*{margin:0;padding:0;font-size:12px;}
li{list-style:none;}
.box{margin:20px;width:320px;height:195px;border:1pxsolid#ddd;padding:10px;overflow:hidden;}
.boxulli{line-height:25px;}
/style
scripttype=text/javascriptsrc=http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js/script
/head
body
divclass=box
ul
li01这是一个无缝向上滚动的特效，是我第一次写这样的插件/li
li02这是一个无缝向上滚动的特效，是我第一次写这样的插件/li
li这是一个无缝向上滚动的特效，是我第一次写这样的插件/li
li这是一个无缝向上滚动的特效，是我第一次写这样的插件/li
li这是一个无缝向上滚动的特效，是我第一次写这样的插件/li
li这是一个无缝向上滚动的特效，是我第一次写这样的插件/li
li这是一个无缝向上滚动的特效，是我第一次写这样的插件/li
li这是一个无缝向上滚动的特效，是我第一次写这样的插件/li
li这是一个无缝向上滚动的特效，是我第一次写这样的插件/li
/ul
/div
script
(function($){
$.fn.scrollTop=function(options){
vardefaults={
speed:30
}
varopts=$.extend(defaults,options);
this.each(function(){
var$timer;
varscroll_top=0;
varobj=$(this);
var$height=obj.find(ul).height();
obj.find(ul).clone().appendTo(obj);
obj.hover(function(){
clearInterval($timer);
},function(){
$timer=setInterval(function(){
scroll_top++;
if(scroll_top$height){
scroll_top=0;
}
obj.find(ul).first().css(margin-top,-scroll_top);
},opts.speed);
}).trigger(mouseleave);
})
}
})(jQuery)
/script
script
$(function(){
$(.box).scrollTop({
speed:30//数值越大速度越慢
});
})
/script
/body
/html