问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

jq 无缝滚动没有效果

头像
燕子am
    13133373

    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>

    页面结构
    <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>
    页面加载时，没有出现滚动效果，，，这是怎么回事呢？

    jquery
    阅读 1.7k
    1 个回答
    得票最新
    头像
    Reachel
      2.6k1114
      ✓ 已被采纳

      在$('#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>

      同时修改样式

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

      最后修改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'});   /*修改点*/
                num=1;  
            }  
            $('.wrap').stop().animate({top:-20*num+'px'});  /*修改点*/
        },1000);  
    }
    goHelpTirm();

      原理是最外层固定宽高，超出隐藏，通过设置内层div的top值实现其无缝滚动

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题