当前位置 : 主页 > 网络编程 > JavaScript >

JQ封装多个向上滚动

来源:互联网 收集:自由互联 发布时间:2021-07-03
这段代码封装了两个向上滚动,如果其中一个的内容小于一屏则不滚动;上代码: CSS: 1. [代码] 这段代码封装了两个向上滚动,如果其中一个的内容小于一屏则不滚动;上代码: CSS:
这段代码封装了两个向上滚动,如果其中一个的内容小于一屏则不滚动;上代码:
CSS:

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

.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;}

2. [代码]HTML:    

<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>

3. [代码]JS:    

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)
        }
    });
网友评论