本文介绍了Html5移动端获奖无缝滚动动画实现示例，分享给大家，具体如下：
需求分析
哈哈，上动态图真的是一下就明了了。
就是滚动么滚动，那么制作这个有什么方法呢？我们来总结一下:
html骨架
其实很简单，最外面的<div>是做固定的窗口，里面的<ul>控制运动，<li>里面是展示动画
| <div class="roll" id="roll"> <ul> <li>第一个结构</li> <li>第二个结构</li> <li>第三个结构</li> <li>第四个结构</li> <li>第五个结构</li> <li>第六个结构</li> <li>第七个结构</li> <li>第八个结构</li> </ul> </div> |
基本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中的关键帧，可以得到跳步的效果。先通过一个短的看一下思路。
