思路:两层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的高度。