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

思路：两层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 = thisclearInterval(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的高度。