文章内容(内容无标签),滚动展示

本文介绍了一种使用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的高度。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值