JS新闻消息上下滚动

新闻消息上下滚动

使用原生js写
原理：获取每隔li的高度，开始执行就把第一个放到最后一个后边去，然后整个ul向上移动一个li的高度，之后再回到0。
用到的知识点：获取元素高度、移动元素的位置、animate动画

• HTML布局

<div class="notice_active">
   		<ul>
   			<li><img src="images/weibiaoti1.png" alt="" />恭喜用户”152****7173“获得银龙鱼一条</li>
   			<li><img src="images/weibiaoti1.png" alt="" />恭喜用户”152****7173“获得银龙鱼一条</li>
   			<li><img src="images/weibiaoti1.png" alt="" />恭喜用户”152****7173“获得银龙鱼一条</li>
   			<li><img src="images/weibiaoti1.png" alt="" />恭喜用户”152****7173“获得银龙鱼一条</li>
   		</ul>
   	</div>

• CSS样式

.notice_active{
  float: left;
  width: 100%;
  height: 0.44rem;
  padding: 0;
  overflow: hidden;position: relative;
  margin: 0.2rem 0;
  box-sizing: border-box;
  padding: 0 3%;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.notice_active>ul>li{
   line-height: 0.44rem;
   display: flex;
   align-items: center;
   color: rgba(0,163,240,1);
   font-size: 0.24rem;
}
.notice_active>ul>li>img{
   width: 0.4rem;
   margin-right: 0.2rem;
}

• JS动态

var time = setInterval(function () {
   			t();
}, 5000)

function t() {
   	var he = $(".notice_active>ul>li").height();//找到li高
   	$(".notice_active>ul>li").eq(0).appendTo($(".notice_active>ul")); //复制第一个到最后一个
   	$(".notice_active>ul").animate({
   		"marginTop": "-" + he
   	}, 500, function () {
   		$(".notice_active>ul").css({
   			"marginTop": 0
   		})
   	})
   }

页面效果：每隔5秒执行一次