这是一款水平文字滚动的小案例，但是这个案例在很多前端网站中都是非常实用的，今天分享给大家了，效果就是跟我的博客公告一样的效果

JS代码

 //文字滚动
window.onload=function(){
  $(function () {
      var _wrap = $('.mulitline');//定义滚动区域

      var _interval = 3000;//定义滚动间隙时间

      var _moving;//需要清除的动画

      _wrap.hover(function () {

          clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动

      }, function () {

          _moving = setInterval(function () {

              var _field = _wrap.find('li:first');//此变量不可放置于函数起始处，li:first取值是变化的

              var _h = _field.height();//取得每次滚动高度

              _field.animate({ marginTop: -_h + 'px' }, 500, function () {//通过取负margin值，隐藏第一行

                  _field.css('marginTop', 0).appendTo(_wrap);//隐藏后，将该行的margin值置零，并插入到最后，实现无缝滚动

              })

          }, _interval)//滚动间隔时间取决于_interval

      }).trigger('mouseleave');//函数载入时，模拟执行mouseleave，即自动滚动

      if ($(".mulitline li").length <= 1)//小于等于1条时，不滚动

      {
          clearInterval(_moving);
      }
  });
};//END Document ready

style样式及HTML文件

  <!--滚动消息-->
           <div class="web-xiaoxi">
            <i class="fa fa-volume-down"></i>
            <ul class="mulitline">
            <li>做了一些小调整，使之看起来更像博客。</li>
            <li>本站内容仅供学习和参阅，不做任何商业用途。</li>
            <li>内容如有侵犯，请立即联系管理员删除</li>
            </ul>
            </div>
   <!--END 消息 -->
    .web-xiaoxi{margin-top:0px;width:67%;float:left;position:relative;font-size:12px;color:#777;}
    .web-xiaoxi i{position:absolute;left:19%;top:6px;color:inherit;}
    .mulitline{height:25px;overflow:hidden;margin-left:18%;}
    .mulitline li{line-height:25px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}