jqueryアップシームレスなマルチキャストを実現

ここに記録しておくと、後で1を使うのに便利です.htmlスタイルは自分でレイアウトすればいい

"myscroll">
     

         
"dixian">                 ...
         
"dixian">                ...
         
"dixian">                  ...
         
"dixian">                  ...
         
"dixian">                 ...
         
"dixian">                 ...
         
"dixian">                 ...
         
"dixian">                   ...
         
"dixian">                  ...
         
"dixian">                ...
     
 

cssスタイル

.myscroll {
    background-color: white;
    height: 300px;
    margin: 0 auto;
    border: 1px solid #ccc;
    line-height: 30px;
    font-size: 12px;
    overflow: hidden;
}

jsファイル

(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);

htmlは速度を操作することもできます

<script>
    $(function(){
        $('.myscroll').myScroll({
            speed: 30, //    ，    
            //rowHeight: 26 //li   
        });
    });
script>

これからはシームレスにアップして、直接持ってきて使うことができます.