Jquery滚动新闻

    网上下载了一个Jquery新闻滚动Demo，效果不错。我根据自己情况，做了些调整。
    下载后，除了Html及Jquery.js,还有三个文件，分别是Css,主Js和一个定位Js（jquery.dimensions.js），Css文件完全可以通过动态赋值实现，省的在Css文件中添加了，况且可以重定义，应该效果更好。
    定位Js只用到一个方法，我把它整合到之中了，少加载一个是一个么。
    原Demo是一行显示的滚动效果，有一个Bug，即不等的多行显示时会跑错，已修复。
    原Demo有一个mouseover属性，我一般不用（效果不好，看一下实现方法也有漏洞，在多行时效果更差），删除了。

    借鉴别人的思路与代码，不敢独享。

删除的部分：

            $( ' > ul ' ,  this )
                .bind( ' mouseover ' ,  function (e)  ... {
                    if ($(e.target).is('li')) ...{
                        $(e.target).addClass('hover');
                    }
                } )
                .bind( ' mouseout ' ,  function (e)  ... {
                    if ($(e.target).is('li')) ...{
                        $(e.target).removeClass('hover');
                    }
                } );

调整后代码：

html部分:

< div  id ="tbNews" >
< ul >
   < li > 1、滚动新闻，滚动新闻，滚动新闻，滚动新闻，滚动新闻 </ li >
   < li > 2、滚动新闻，滚动新闻 </ li >
   < li > 3、滚动新闻，滚动新闻，滚动新闻，滚动新闻 </ li >
   < li > 4、滚动新闻，滚动新闻，滚动新闻，滚动新闻，滚动新闻 </ li >
   < li > 5、滚动新闻 </ li >
</ ul >
</ div >
< script  language ="JavaScript"  src ="jdNewsScroll.js"  type ="text/javascript" >
</ script >
< script  defer ="defer"  language ="JavaScript"  type ="text/javascript" >
$( function () {
  $( ' #tbNews ' ).jdNewsScroll({divWidth: 130 ,divHeight: 50 ,fontSize: ' 10.5pt ' });
});
</ script >

Js代码：

( function ($){
      var  ELMS  =  [];
     $.fn.jdNewsScroll  =   function (settings) {
        settings  =  $.extend({}, arguments.callee.defaults, settings);
    $( this ).css({ " position " : " relative " , " overflow " : " hidden " , " width " :settings.divWidth, " height " :settings.divHeight});
    $( this ).find( " ul " ).css({ " position " : " relative " , " list-style-type " : " none " , " font-size " :settings.fontSize, " margin " : " 0px " });
    $( this ).find( " li " ).css({ " line-height " : " 130% " , " margin " : " 0px " , " padding " : " 2px 10px 1px 10px " });
        $( this ).each( function (){
             this .$settings     =  settings;
             this .$pause  =   false ;
             this .$counter     =  settings.beginTime;
            $( this ).hover( function (){ $( this ).jdNewsScrollPause( true ) },  function (){ $( this ).jdNewsScrollPause( false ) });
            ELMS.push( this );
        });
         return   this ;
    };
    $.fn.jdNewsScroll.defaults  =  {
        beginTime:  10 ,
        fontSize:  ' 9pt ' ,
        divWidth:  ' 100% ' ,
        divHeight:  ' 200px ' ,
        lineHeight:  ' 130% ' ,
        delay:      20 ,
        step:     2
    };
    $.fn.jdNewsScrollPause  =   function (pause) {
         return   this .each( function () {
             this .$pause  =  pause;
        });
    }
     function  outerHeight(options) {
         if  ( ! this [ 0 ])  0 ;
        options  =  $.extend({ margin:  false  }, options  ||  {});
         return   this [ 0 ]  ==  window  ||   this [ 0 ]  ==  document  ?
             this .height() :  this .is( ' :visible ' )  ?
                 this [ 0 ].offsetHeight  +  (options.margin  ?  (num( this ,  ' marginTop ' )  +  num( this ,  ' marginBottom ' )) :  0 ) :
                 this .height() 
                     +  num( this , ' borderTopWidth ' )  +  num( this ,  ' borderBottomWidth ' ) 
                     +  num( this ,  ' paddingTop ' )  +  num( this ,  ' paddingBottom ' )
                     +  (options.margin  ?  (num( this ,  ' marginTop ' )  +  num( this ,  ' marginBottom ' )) :  0 );
    }

    setInterval(scroll,  80 );
     function  scroll() {
         for  ( var  i  =   0 ; i  <  ELMS.length; i ++ ) {
             var  elm  =  ELMS[i];
             if  (elm  &&   ! elm.$pause) {
                 if  (elm.$counter  ==   0 ) {
                     var  ul      =  $( ' > ul ' , elm)[ 0 ];
                     if  ( ! elm.$steps) {
                        elm.$steps  =  $( ' > li:first-child ' , ul).outerHeight();
                        elm.$step     =   0 ;
                    }
                     if  ((elm.$steps  +  elm.$step)  <=   0 ) {
                        elm.$counter      =  elm.$settings.delay;
                        elm.$steps          =   false ;
                        $(ul).css( ' top ' ,  ' 0 ' ).find( ' > li:last-child ' ).after($( ' > li:first-child ' , ul));
                        $( ' > * ' , ul).not( ' li ' ).remove();
                    }  else  {
                        elm.$step  -=  elm.$settings.step;
                         if  ( - elm.$step  >  elm.$steps) {
                            elm.$step  =   - elm.$steps;
                        }
                        ul.style.top  =  elm.$step  +   ' px ' ;
                    }
                }  else  {
                    elm.$counter -- ;
                }
            }
        }
    };
})(jQuery);