本文介紹了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中的關鍵幀，可以得到跳步的效果。先通過一個短的看一下思路。
初步
1.如果是寫死的獲獎，那么需要把前面的那個復制一份到后面去，如果是一個一個滾動那么就復制第一個，如果是兩個兩個滾動的就復制第一個和第二個。
<div 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></div>
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.首先獲取<li>的長度length
2.然后計算間隔百分比，因為有停頓所以記得要用秒數×2
3.然后用字符串拼寫@keyframes，0~length，包括length，因為多一個，雙數和單數分開。
4.把<ul>中的第一個和第二個克隆到<ul>的最后
5.創建一個<style>標簽加入到<head>中
6.給<ul>添加動畫屬性
話不多說上代碼：
function addKeyFrame(){ var ulObj = $("#roll ul"), //獲取ul對象 length = $("#roll li").length, //獲取li數組長度 per = 100 / (length / 2 * 2 ); //計算中間間隔百分比 // 拼接字符串 var keyframes = `/ @keyframes ani{`; for(var i = 0 ; i<=length ; i++ ){ keyframes+=`${i * per}%{ margin-top: ${i % 2 == 0 ? -i * 20 : -(i - 1) * 20}px; }`; } keyframes+='}'; var liFirst = $("#roll li:first"), //獲取第一個元素 liSec = liFirst.next(); //獲取第二個元素 ulObj.append(liFirst.clone()).append(liSec.clone()); //將兩個元素插入到ul里面 $("<style>").attr("type","text/css").html(keyframes).appendTo($("head")); //創建style標簽把關鍵幀插入到頭部 ulObj.css("animation","ani 5s linear infinite"); //給ul添加css3動畫 } addKeyFrame();三、zepto+transition實現
移動端的zepto沒有animate函數，如果不用css3的屬性，那如何用js去寫？
var timer,top;function roll(){ var ulObj = $("#roll").find("ul"), length = $("#roll li").length, liFirst = $("#roll").find("li:first"); liSec = liFirst.next(); ulObj.append(liFirst.clone()).append(liSec.clone()); //把第一個第二個都添加到<ul>標簽中 clearInterval(timer); timer = setInterval(function(){ //設置定時器 var top = ulObj.css("margin-top"); top = +top.slice(0,-2); if(top != -(20 * length)){ //獲取現在的高度如果沒有到最后就上移 top -= 40; ulObj.css({"-webkit-transition":"all 1s","transition":"all 1s","margin-top":top}); }else{ //如果到了最后就迅速到零 top = 0; ulObj.css({"-webkit-transition":"none","transition":"none","margin-top":top}); setTimeout(function(){ //這里加一個延時器，也是要放在隊列最后去執行，為了避免兩個動畫合并 top -= 40; ulObj.css({"-webkit-transition":"all 1s","transition":"all 1s","margin-top":top}); },0) } },2000);}roll();如果還有別的方法，下次我會不定期更新的。不過移動端的話這幾個應該夠用了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
