Jquery控制文字横向移动

首先html页面代码定义

 <div class="navbar-inner" id="s" style="width:600px; position:relative; white-space:nowrap; overflow:hidden; height:60px;">
<div id="noticeList" style="position:absolute; top:0; height:20px;"> <span>截止目前：共提交问卷${alltotal}份，盐田${mt3total}份，蛇口${mt4total}份，赤湾${mt1total}份，大铲${mt2total}份。实时更新中~ </span><div>
 </div>

Js代码

方法一：

$.fn.textScroll=function(){

    varspeed=60,flag=null,tt,that=$(this),child=that.children();

    varp_w=that.width(), w=child.width();

    child.css({left:p_w});

    vart=(w+p_w)/speed * 1000;

    functionplay(m){

        vartm= m==undefined ? t : m;

        child.animate({left:-w},tm,"linear",function(){            

            $(this).css("left",p_w);

            play();

        });                

    }

    child.on({

        mouseenter:function(){

            varl=$(this).position().left;

            $(this).stop();

            tt=(-(-w-l)/speed)*1000;

        },

        mouseleave:function(){

            play(tt);

            tt=undefined;

        }

    });

    play();

}

方法二：

$.fn.textScroll=functioon(){

    varp = $(this),

        c = p.children(),

        speed=3000;// 值越大，速度越小

    varcw = c.width(),pw=p.width();

    vart = (cw / 100) * speed;

    varf = null, t1 = 0;

    functionani(tm) {

        counttime();

        c.animate({ left: -cw }, tm, "linear",function() {

            c.css({ left: pw });

            clearInterval(f);

            t1 = 0;

            t=((cw+pw)/100)*speed;

            ani(t);

        });

    }

    functioncounttime() {

        f = setInterval(function() {

            t1 += 10;

        }, 10);

    }

    p.on({

        mouseenter:function() {

            c.stop(false,false);

            clearInterval(f);

            console.log(t1);

        },

        mouseleave:function() {

            ani(t - t1);

            console.log(t1);

        }

    });

    ani(t);

}

最后调用$("#s").textScroll();

使用案例：

 <script type="text/javascript">
   $.fn.textScroll=function(){
         var speed=60,flag=null,tt,that=$(this),child=that.children();
         var p_w=that.width(), w=child.width();
         child.css({left:p_w});
         var t=(w+p_w)/speed * 1000;
         function play(m){
            var tm= m==undefined ? t : m;
            child.animate({left:-w},tm,"linear",function(){             
            $(this).css("left",p_w);
            play();
        });                 
       }
          child.on({
              mouseenter:function(){
              var l=$(this).position().left;
              $(this).stop();
             tt=(-(-w-l)/speed)*1000;
          },
          mouseleave:function(){
             play(tt);
             tt=undefined;
         }
       });
         play();
    }
    
       $(document).ready(
      function(){
      $("#s").textScroll();
      }
 );
   </script>