文字上下滚动 左右滚动

1、文字左右滚动

#big-demo{
float: left;
width: 500%;
}
<div class="fr" id="demo">
  <div id="big-demo">
    <div id="demo1">
      <ul>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div id="demo2">
    </div>
  </div>
</div>
<script>
  var Timer = setInterval(scroll,1000);
  function scroll(){
    clearInterval(Timer);
    var speed=20;
    var tab=document.getElementById("demo");
    var tab1=document.getElementById("demo1");
    var tab2=document.getElementById("demo2");
    tab2.innerHTML=tab1.innerHTML;
    function Marquee(){
      if(tab2.offsetWidth-tab.scrollLeft<=0)
        tab.scrollLeft-=tab1.offsetWidth
      else{
        tab.scrollLeft++;
      }
    }
    var scroll=setInterval(Marquee,speed);
    tab.οnmοuseοver=function() {clearInterval(scroll)};
    tab.οnmοuseοut=function() {scroll=setInterval(Marquee,speed)};
  }
</script>

2、文字上下滚动
(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);

<div class="myscroll">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

.myscroll {
    width: 300px;
    height: 260px;
    margin: 0 auto;
    border: 1px solid #ccc;
    line-height: 26px;
    font-size: 12px;
    overflow: hidden;
}
.myscroll li {
    height: 26px;//step
    margin-left: 25px;
}

参考链接：http://www.dowebok.com/69.html