div框中信息自下而上滚动

html:

　　<div id="marquee4">
            <ul>
                <li class="bgc"><a href="#">中华人民共和国环境保护法</a></li>
                <li><a href="#">中华人民共和国未成年人保护法</a></li>
                <li class="bgc"><a href="#">中华人民共和国环境保护法</a></li>
                <li><a href="#">中华人民共和国未成年人保护法</a></li>
                <li class="bgc"><a href="#">中华人民共和国环境保护法</a></li>
                <li><a href="#">中华人民共和国未成年人保护法</a></li>
                <li class="bgc"><a href="#">中华人民共和国环境保护法</a></li>
                <li><a href="#">中华人民共和国未成年人保护法</a></li>
                <li class="bgc"><a href="#">中华人民共和国环境保护法</a></li>
                <li><a href="#">中华人民共和国未成年人保护法</a></li>
                <li class="bgc"><a href="#">中华人民共和国环境保护法</a></li>
                <li><a href="#">中华人民共和国未成年人保护法</a></li>
                <li class="bgc"><a href="#">中华人民共和国环境保护法</a></li>
                <li><a href="#">中华人民共和国未成年人保护法</a></li>
                <li class="bgc"><a href="#">中华人民共和国环境保护法</a></li>
                <li><a href="#">中华人民共和国未成年人保护法</a></li>
                <li class="bgc"><a href="#">中华人民共和国环境保护法</a></li>
                <li><a href="#">中华人民共和国未成年人保护法</a></li>
                <li class="bgc"><a href="#">中华人民共和国环境保护法</a></li>
                <li><a href="#">中华人民共和国未成年人保护法</a></li>
                <li class="bgc"><a href="#">中华人民共和国环境保护法</a></li>
                <li><a href="#">中华人民共和国未成年人保护法</a></li>
                <li class="bgc"><a href="#">中华人民共和国环境保护法</a></li>
                <li><a href="#">中华人民共和国未成年人保护法</a></li>
                <li class="bgc"><a href="#">中华人民共和国环境保护法</a></li>
                <li><a href="#">中华人民共和国未成年人保护法</a></li>
                <li class="bgc"><a href="#">中华人民共和国环境保护法</a></li>
                <li><a href="#">中华人民共和国未成年人保护法</a></li>
            </ul>
        </div>

css:

　　#marquee4{
        　width:100%;
        　height:94%;
        　overflow:hidden;
    　}
    　#marquee4 ul li{
        　width:100%;
        　padding:10px;
        　line-height:20px;
        　font-size:1.2em;
        　list-style-type:none;
        　margin-left:-22px;
    　}
    　#marquee4 ul li a {
        　margin-left:22px;
    　}
    　.bgc {
        　background-color:rgba(224,238,238,0.2);
    　}

js:

　<script src="/public/javascripts/jquery.kxbdMarquee.js"></script>
　<script type="text/javascript">
    　$(function(){
        　$("#marquee4").kxbdMarquee({direction:"up",isEqual:false});
    　});
　</script>

其中jquery.kxbdMarquee.js代码：

 

/**
 * @classDescription 模拟Marquee，无间断滚动内容
 * @DOM
 *      <div id="marquee">
 *          <ul>
 *               <li></li>
 *               <li></li>
 *          </ul>
 *      </div>
 * @Usage
 *      $("#marquee").kxbdMarquee(options);
 * @options
 *        isEqual:true,        //所有滚动的元素长宽是否相等,true,false
 *      loop:0,                //循环滚动次数，0时无限
 *        direction:"left",    //滚动方向，"left","right","up","down"
 *        scrollAmount:1,        //步长
 *        scrollDelay:20        //时长
 */
(function($){
    $.fn.kxbdMarquee=function(options){
        var opts=$.extend({},$.fn.kxbdMarquee.defaults, options);

        return this.each(function(){
            var $marquee=$(this);                //滚动元素容器
            var _scrollObj=$marquee.get(0);        //滚动元素容器DOM
            var scrollW=$marquee.width();        //滚动元素容器的宽度
            var scrollH=$marquee.height();        //滚动元素容器的高度
            var $element=$marquee.children();    //滚动元素
            var $kids=$element.children();        //滚动子元素
            var scrollSize=0;                    //滚动元素尺寸

            //滚动类型，1左右，0上下
            var _type=(opts.direction=="left"||opts.direction=="right") ? 1:0;

            //防止滚动子元素比滚动元素宽而取不到实际滚动子元素宽度
            $element.css(_type?"width":"height",10000);

            //获取滚动元素的尺寸
            if(opts.isEqual){
                scrollSize=$kids[_type?"outerWidth":"outerHeight"]()*$kids.length;
            }else{
                $kids.each(function(){
                    scrollSize+=$(this)[_type?"outerWidth":"outerHeight"]();
                });
            };

            //滚动元素总尺寸小于容器尺寸，不滚动
            if(scrollSize<(_type?scrollW:scrollH)){return;}; 

            //克隆滚动子元素将其插入到滚动元素后，并设定滚动元素宽度
            $element.append($kids.clone()).css(_type?"width":"height",scrollSize*2);

            var numMoved=0;
            function scrollFunc(){
                var _dir=(opts.direction=="left"||opts.direction=="right") ? "scrollLeft":"scrollTop";
                if (opts.loop>0) {
                    numMoved+=opts.scrollAmount;
                    if(numMoved>scrollSize*opts.loop){
                        _scrollObj[_dir]=0;
                        return clearInterval(moveId);
                    };
                };

                if(opts.direction=="left"||opts.direction=="up"){
                    var newPos=_scrollObj[_dir]+opts.scrollAmount;
                    if(newPos>=scrollSize){
                        newPos-=scrollSize;
                    }
                    _scrollObj[_dir]=newPos;
                }else{
                    var newPos=_scrollObj[_dir]-opts.scrollAmount;
                    if(newPos<=0){
                        newPos += scrollSize;
                    };
                    _scrollObj[_dir]=newPos;
                };
            };

            //滚动开始
            var moveId=setInterval(scrollFunc, opts.scrollDelay);

            //鼠标划过停止滚动
            $marquee.hover(function(){
                clearInterval(moveId);
            },function(){
                clearInterval(moveId);
                moveId=setInterval(scrollFunc, opts.scrollDelay);
            });
        });
    };

    $.fn.kxbdMarquee.defaults={
        isEqual:true,        //所有滚动的元素长宽是否相等,true,false
        loop: 0,            //循环滚动次数，0时无限
        direction: "left",    //滚动方向，"left","right","up","down"
        scrollAmount:1,        //步长
        scrollDelay:20        //时长

    };

    $.fn.kxbdMarquee.setDefaults=function(settings) {
        $.extend( $.fn.kxbdMarquee.defaults, settings );
    };
})(jQuery);