jQuery多行文字无缝滚动

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

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

多行滚动HTML：

!DOCTYPE html>
    html>
    head>
    meta http-equiv="Content-Type" content="text/html;
     charset=utf-8" />
    title>
    jQuery无缝向上滚动/title>
    style>
*{
    margin:0;
    padding:0;
    font-size:12px;
}
li{
    list-style:none;
}
.box{
    margin:20px;
    width:320px;
    height:195px;
    border:1px solid #ddd;
    padding:10px;
    overflow:hidden;
}
.box ul li{
    line-height:25px;
}
    /style>
    script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    /script>
    /head>
    body>
    div class="box">
     ul>
     li>
    01这是一个无缝向上滚动的特效，是我第一次写这样的插件/li>
     li>
    02这是一个无缝向上滚动的特效，是我第一次写这样的插件/li>
     li>
    这是一个无缝向上滚动的特效，是我第一次写这样的插件/li>
     li>
    这是一个无缝向上滚动的特效，是我第一次写这样的插件/li>
     li>
    这是一个无缝向上滚动的特效，是我第一次写这样的插件/li>
     li>
    这是一个无缝向上滚动的特效，是我第一次写这样的插件/li>
     li>
    这是一个无缝向上滚动的特效，是我第一次写这样的插件/li>
     li>
    这是一个无缝向上滚动的特效，是我第一次写这样的插件/li>
     li>
    这是一个无缝向上滚动的特效，是我第一次写这样的插件/li>
     /ul>
    /div>
    script>
(function($){
 $.fn.scrollTop = function(options){
      var defaults = {
       speed:30 }
      var opts = $.extend(defaults,options);
  this.each(function(){
           var $timer;
           var scroll_top=0;
           var obj = $(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>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！