鍍金池/ 問答/Android  HTML/ jq 無縫滾動沒有效果

jq 無縫滾動沒有效果

css 樣式
<style>

    .mes-con{
        width: 500px;
        height:200px;
        border:1px solid grey;
        margin:30px auto;
        overflow: hidden;
    }
    .one{
        width: 50px;
        height: 50px;
        line-height: 30px;
        text-align:center;
        border-radius:50%;
        background:#e1c19b;
        color:black;
    }
</style>

頁面結(jié)構(gòu)
<body>
<div id="actNum2" class="mes-con">

<p><label class="one">1</label>人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華</p>
<p><label class="one">2</label>人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華</p> 
<p><label class="one">3</label>人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華</p> 
<p><label class="one">4</label>人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華</p>
<p><label class="one">4</label>人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華</p>
<p><label class="one">4</label>人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華</p>

</div>
</body>
js 效果
<script type="text/javascript">
function goHelpTirm(){

var TirmLength=$('#actNum2').find('p').length;
console.log(TirmLength);
var num=0;              
setInterval(function(){  
    num++;  
    if(num > TirmLength){ 
        num=0;  
        $('#actNum2').css({'top':'0'});    
        num=1;  
    }  
    $('#actNum2').stop().animate({top:-20*num+'px'});  
},1000);

}
goHelpTirm();
</script>
頁面加載時(shí)，沒有出現(xiàn)滾動效果，，，這是怎么回事呢？

回答
編輯回答
胭脂淚

在$('#actNum2')下再嵌套一層divwrap

    <div id="actNum2" class="mes-con">
        <div class="wrap">
            <p><label class="one">1</label>人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華</p>
            <p><label class="one">2</label>人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華</p> 
            <p><label class="one">3</label>人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華</p> 
            <p><label class="one">4</label>人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華</p>
            <p><label class="one">4</label>人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華</p>
            <p><label class="one">4</label>人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華人民中華</p>
        </div>
    </div>

同時(shí)修改樣式

.mes-con{
    width: 500px;
    height:200px;
    border:1px solid grey;
    margin:30px auto;
    overflow: hidden;
    position:relative;/*修改點(diǎn)*/
}
.wrap{
    position:absolute; /*修改點(diǎn)*/
}

最后修改js

    function goHelpTirm(){
        var TirmLength=$('#actNum2').find('p').length;
        console.log(TirmLength);
        var num=0;              
        setInterval(function(){  
            num++;  
            if(num > TirmLength){ 
                num=0;  
                $('.wrap').css({'top':'0'});   /*修改點(diǎn)*/
                num=1;  
            }  
            $('.wrap').stop().animate({top:-20*num+'px'});  /*修改點(diǎn)*/
        },1000);  
    }
    goHelpTirm();

原理是最外層固定寬高，超出隱藏，通過設(shè)置內(nèi)層div的top值實(shí)現(xiàn)其無縫滾動

2017年3月8日 07:40