文章内容（内容无标签），滚动展示

最新推荐文章于 2022-04-29 18:06:31 发布

原创最新推荐文章于 2022-04-29 18:06:31 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JQ #文章列表滚动

JQ 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现滚动文字效果的方法。通过两层div布局，外层设置overflow:hidden，内层通过定时器和animate实现内容的平滑滚动。详细展示了html结构、css样式和jq代码，适用于前端开发人员学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：两层div包括内容，外层oveflow:hidden，内层高度自适应并定位top：0，通过animate和定时器完成向上滚动和过渡效果。

html部分

 <div class="carousel_content">
      <p id="demo">
         康师傅去玩ID目前排名的前五名判断，去带我去
         傅去玩ID目前排名的前五名判断，去带我去的武器的武器
         傅去玩ID目前排名的前五名判断，去带我去的武器的武器
         傅去玩ID目前排名的前五名判断，去带我去的武器的武器
         傅去玩ID目前排名的前五名判断，去带我去的武器的武器的武器的武器的期望的发发
         傅去玩ID目前排名的前五名判断，去带我去的武器的武器的武器的武器的期望的发发
         傅去玩ID目前排名的前五名判断，去带我去的武器的武器的武器的武器的期望的发发
     </p>
 </div>

css部分

.carousel_content{
    width: 3.08rem;
    height: 0.72rem;
    margin: 0 auto 0.27rem;
    font-size: 12px;
    text-align: left;
    overflow: hidden;
    position: relative;
}
.carousel_content p{
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

jq部分

由于内容是append进页面的，利用了事件的委托触发事件

  //事件的委托处理
        var timer = null;
        $(document).on('mouseover','.carousel_content #demo',function(){
            var _this = this
            clearInterval(timer);//清楚定时器
            var total=Math.floor($('#demo').height()/18)-1; //循环的次数
            var num = 0;
            console.log(total)
            timer = setInterval(function(){
                num++;
                if(num <total){
                    $(_this).animate({
                        top:-0.18*num+'rem'  //每次移动的距离
                    });
                }else{
                    $(_this).animate({
                        top:0
                    });
                }
            },2500)
        })
        $(document).on('mouseout','.carousel_content #demo',function(){
            clearInterval(timer)
            $(this).animate({
                top:0
            });
        })

注意：显示的行数*行高 = 外部div的高度。