这段代码封装了两个向上滚动,如果其中一个的内容小于一屏则不滚动;上代码:
CSS:

1
2
3
4
.showdebateBorder{width:770px;margin:44px auto 70px;}
.showdebateBorder .showdebate_left{ float: left;width:410px;height:188px;overflow: hidden;border-right:1px solid red;}
.showdebateBorder .showdebate_right{float: left;width:350px;height:188px;overflow: hidden;}
.showdebateBorder .showdebate_right li{line-height: 24px;}

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="showdebateBorder clearfix">
    <div class="showdebate_left">
        <ul class="debateList">
            <li>辩论帖测试辩论帖测试辩论帖测试辩论帖测试</li>
        </ul>
    </div>
    <div class="showdebate_right">
        <ul class="debateList">
            <li>辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试</li>
            <li>辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试</li>
            <li>辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试</li>
            <li>辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试</li>
            <li>辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试</li>
            <li>辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试</li>
            <li>辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试</li>
            <li>辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试辩论帖测试</li>
        </ul>
    </div>
</div>

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
jQuery(function(){
        var $ = jQuery;
        var leftDebateList = $(".showdebate_left .debateList");
        var showdebate_leftHeight = parseInt($(".showdebate_left").css("height"));
        var leftDebateListHeight = parseInt($(".showdebate_left .debateList").css("height"));
 
        var rightDebateList = $(".showdebate_right .debateList");
        var showdebate_rightHeight = parseInt($(".showdebate_right").css("height"));
        var rightDebateListHeight = parseInt($(".showdebate_right .debateList").css("height"));
 
        if(leftDebateListHeight > showdebate_leftHeight){
            rolling(leftDebateList,leftDebateListHeight);
        }
        if(rightDebateListHeight > showdebate_rightHeight){
            rolling(rightDebateList,rightDebateListHeight);
        }
 
        function rolling(obj,objheight){
            var iHeight = 0;
            obj.append(obj.find("li").clone());
            setInterval(function(){
                iHeight -= 24;
                if(-iHeight > objheight){iHeight = 0;}
                obj.animate({"marginTop":iHeight})
            },3000)
        }
    });