中奖人js滚动效果_js实现消息滚动效果

本文主要分享了js实现消息滚动效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧

今天教大家做个消息滚动的小功能。实现的很简单。自己都有点意想不到呢~  哈哈

1.实现的中心思想，如图所示：

2.图片移动，用的是appendTo()这个方法。这个方法是先将标签从父标签中删除，然后拼接到某个标签后面，所以也就是替我们实现了，remove()这个方法。所以用这个方法是极好的~

3.然后就会用到定时器了。用定时器每次调用移动方法，让

• 每次执行一个动画，改变它的margin-top值，执行完动画后，再将它的margin-top变为初始值；

4.触摸

• 标签清除定时器，离开后，继续执行。滚动信息

*{

margin: 0;

padding:0;

}

.scroll-box{

width: 400px;

height: 200px;

border: 2px solid #000;

margin: 20px auto;

overflow: hidden;

}

.scroll-box ul{

list-style: none;

width: 100%;

height: 100%;

}

.scroll-box ul li{

width: 100%;

heigh