这篇文章主要介绍了html5移动端获奖无缝滚动动画实现示例，内容挺不错的，现在分享给大家，也给大家做个参考。
本文介绍了Html5移动端获奖无缝滚动动画实现示例，分享给大家，具体如下：
需求分析
哈哈，上动态图真的是一下就明了了。
就是滚动么滚动，那么制作这个有什么方法呢？我们来总结一下:
html骨架
其实很简单，最外面的
是做固定的窗口，里面的
<p class="roll" id="roll">
<ul>
<li>第一个结构</li>
<li>第二个结构</li>
<li>第三个结构</li>
<li>第四个结构</li>
<li>第五个结构</li>
<li>第六个结构</li>
<li>第七个结构</li>
<li>第八个结构</li>
</ul>
</p>基本css样式
先把基本的css样式实现
*{
margin:0;
padding:0;
}
.roll{
margin: 100px auto;
width: 200px;
height: 40px;
overflow:hidden;
border: 1px solid aquamarine;
}
.roll ul{
list-style: none;
}
.roll li{
line-height:20px;
font-size:14px;
text-align:center;
}可以看看大致的样式:
实现思路
一、使用jquery的animate动画
animate()方法
$(selector).animate(styles,speed,easing,callback)
参数：
styles:必需参数，需要产生动画的css样式(使用驼峰式命名)
speed: 规定动画的速度
@number:1000(ms)
@string:"slow","normal","fast"
easing:动画速度（swing,linear）
callback:函数执行完之后的回调函数
$(document).ready(function(){
setInterval(function(){ // 添加定时器，每1.5s进行转换
$("#roll").find("ul:first").animate({
marginTop:"-40px" //每次移动的距离
},500,function(){ // 动画运动的时间
//$(this)指的是ul对象，
//ul复位之后把第一个元素和第二个元素插入
//到ul的最后一个元素的位置
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
$(this).find("li:first").appendTo(this);
});
},1500)
});看看效果:
二、使用css3的animation动画
通过css3中的关键帧，可以得到跳步的效果。先通过一个短的看一下思路。
初步
1.如果是写死的获奖，那么需要把前面的那个复制一份到后面去，如果是一个一个滚动那么就复制第一个，如果是两个两个滚动的就复制第一个和第二个。
<p class="roll" id="roll">
<ul>
<li>第一个结构</li>
<li>第二个结构</li>
<li>第三个结构</li>
<li>第四个结构</li>
<li>第五个结构</li>
<li>第六个结构</li>
<li>第七个结构</li>
<li>第八个结构</li>
<li>第一个结构</li>
<li>第二个结构</li>
</ul>
</p>2.然后计算需要滚动多少次，一次多少秒,例子是两个两个滚动，需要5s，所以css3的animation的时间是5s。那么@keyframe需要分成几份呢？因为是停顿，每一个滚动都需要两份，最后一个要跳动所以只有一份，所以需要5 * 2 - 1 = 9份，看代码就晓得了：
/*这里不做兼容性处理*/
.roll ul{
list-style: none;
animation: ani 5s linear infinite; /*动画ani，5s，循环匀速播放*/
}
@keyframes ani{
0%{
margin-top: 0;
}
12.5%{
margin-top: 0;
}
25%{
margin-top: -40px;
}
37.5%{
margin-top: -40px;
}
50%{
margin-top: -80px;
}
62.5%{
margin-top: -80px;
}
75%{
margin-top: -120px;
}
87.5%{
margin-top: -120px;
}
100%{
margin-top: -160px; /*最后是一个，这样可以打断动画*/
}
}进阶
如果个数不确定，那么就需要动态的计算，用js动态地添加@keyframes ，到时候只要自己可以计算清楚间隔还有移动的距离就好。
1.首先获取
