本文介紹了Html5移動(dòng)端獲獎(jiǎng)無(wú)縫滾動(dòng)動(dòng)畫(huà)實(shí)現(xiàn)示例，分享給大家，具體如下：
需求分析
哈哈，上動(dòng)態(tài)圖真的是一下就明了了。
就是滾動(dòng)么滾動(dòng)，那么制作這個(gè)有什么方法呢？我們來(lái)總結(jié)一下:
html骨架
其實(shí)很簡(jiǎn)單，最外面的<div>是做固定的窗口，里面的<ul>控制運(yùn)動(dòng)，<li>里面是展示動(dòng)畫(huà)
<div class="roll" id="roll"> <ul> <li>第一個(gè)結(jié)構(gòu)</li> <li>第二個(gè)結(jié)構(gòu)</li> <li>第三個(gè)結(jié)構(gòu)</li> <li>第四個(gè)結(jié)構(gòu)</li> <li>第五個(gè)結(jié)構(gòu)</li> <li>第六個(gè)結(jié)構(gòu)</li> <li>第七個(gè)結(jié)構(gòu)</li> <li>第八個(gè)結(jié)構(gòu)</li> </ul></div>
基本css樣式
先把基本的css樣式實(shí)現(xiàn)
*{ 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;}可以看看大致的樣式:
實(shí)現(xiàn)思路
一、使用jquery的animate動(dòng)畫(huà)
animate()方法
$(selector).animate(styles,speed,easing,callback)
參數(shù)：
styles:必需參數(shù)，需要產(chǎn)生動(dòng)畫(huà)的css樣式(使用駝峰式命名)
speed: 規(guī)定動(dòng)畫(huà)的速度
@number:1000(ms)
@string:"slow","normal","fast"
easing:動(dòng)畫(huà)速度（swing,linear）
callback:函數(shù)執(zhí)行完之后的回調(diào)函數(shù)
$(document).ready(function(){ setInterval(function(){ // 添加定時(shí)器，每1.5s進(jìn)行轉(zhuǎn)換 $("#roll").find("ul:first").animate({ marginTop:"-40px" //每次移動(dòng)的距離 },500,function(){ // 動(dòng)畫(huà)運(yùn)動(dòng)的時(shí)間 //$(this)指的是ul對(duì)象， //ul復(fù)位之后把第一個(gè)元素和第二個(gè)元素插入 //到ul的最后一個(gè)元素的位置 $(this).css({marginTop:"0px"}).find("li:first").appendTo(this); $(this).find("li:first").appendTo(this); }); },1500) });看看效果:
二、使用css3的animation動(dòng)畫(huà)
通過(guò)css3中的關(guān)鍵幀，可以得到跳步的效果。先通過(guò)一個(gè)短的看一下思路。
初步
1.如果是寫(xiě)死的獲獎(jiǎng)，那么需要把前面的那個(gè)復(fù)制一份到后面去，如果是一個(gè)一個(gè)滾動(dòng)那么就復(fù)制第一個(gè)，如果是兩個(gè)兩個(gè)滾動(dòng)的就復(fù)制第一個(gè)和第二個(gè)。
<div class="roll" id="roll"> <ul> <li>第一個(gè)結(jié)構(gòu)</li> <li>第二個(gè)結(jié)構(gòu)</li> <li>第三個(gè)結(jié)構(gòu)</li> <li>第四個(gè)結(jié)構(gòu)</li> <li>第五個(gè)結(jié)構(gòu)</li> <li>第六個(gè)結(jié)構(gòu)</li> <li>第七個(gè)結(jié)構(gòu)</li> <li>第八個(gè)結(jié)構(gòu)</li> <li>第一個(gè)結(jié)構(gòu)</li> <li>第二個(gè)結(jié)構(gòu)</li> </ul></div>
2.然后計(jì)算需要滾動(dòng)多少次，一次多少秒,例子是兩個(gè)兩個(gè)滾動(dòng)，需要5s，所以css3的animation的時(shí)間是5s。那么@keyframe需要分成幾份呢？因?yàn)槭峭ｎD，每一個(gè)滾動(dòng)都需要兩份，最后一個(gè)要跳動(dòng)所以只有一份，所以需要5 * 2 - 1 = 9份，看代碼就曉得了：
/*這里不做兼容性處理*/.roll ul{ list-style: none; animation: ani 5s linear infinite; /*動(dòng)畫(huà)ani，5s，循環(huán)勻速播放*/}@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; /*最后是一個(gè)，這樣可以打斷動(dòng)畫(huà)*/ }}進(jìn)階
如果個(gè)數(shù)不確定，那么就需要?jiǎng)討B(tài)的計(jì)算，用js動(dòng)態(tài)地添加@keyframes ，到時(shí)候只要自己可以計(jì)算清楚間隔還有移動(dòng)的距離就好。
1.首先獲取<li>的長(zhǎng)度length
2.然后計(jì)算間隔百分比，因?yàn)橛型ｎD所以記得要用秒數(shù)×2
3.然后用字符串拼寫(xiě)@keyframes，0~length，包括length，因?yàn)槎嘁粋€(gè)，雙數(shù)和單數(shù)分開(kāi)。
4.把<ul>中的第一個(gè)和第二個(gè)克隆到<ul>的最后
5.創(chuàng)建一個(gè)<style>標(biāo)簽加入到<head>中
6.給<ul>添加動(dòng)畫(huà)屬性
話(huà)不多說(shuō)上代碼：
function addKeyFrame(){ var ulObj = $("#roll ul"), //獲取ul對(duì)象 length = $("#roll li").length, //獲取li數(shù)組長(zhǎng)度 per = 100 / (length / 2 * 2 ); //計(jì)算中間間隔百分比 // 拼接字符串 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"), //獲取第一個(gè)元素 liSec = liFirst.next(); //獲取第二個(gè)元素 ulObj.append(liFirst.clone()).append(liSec.clone()); //將兩個(gè)元素插入到ul里面 $("<style>").attr("type","text/css").html(keyframes).appendTo($("head")); //創(chuàng)建style標(biāo)簽把關(guān)鍵幀插入到頭部 ulObj.css("animation","ani 5s linear infinite"); //給ul添加css3動(dòng)畫(huà) } addKeyFrame();三、zepto+transition實(shí)現(xiàn)
移動(dòng)端的zepto沒(méi)有animate函數(shù)，如果不用css3的屬性，那如何用js去寫(xiě)？
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()); //把第一個(gè)第二個(gè)都添加到<ul>標(biāo)簽中 clearInterval(timer); timer = setInterval(function(){ //設(shè)置定時(shí)器 var top = ulObj.css("margin-top"); top = +top.slice(0,-2); if(top != -(20 * length)){ //獲取現(xiàn)在的高度如果沒(méi)有到最后就上移 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(){ //這里加一個(gè)延時(shí)器，也是要放在隊(duì)列最后去執(zhí)行，為了避免兩個(gè)動(dòng)畫(huà)合并 top -= 40; ulObj.css({"-webkit-transition":"all 1s","transition":"all 1s","margin-top":top}); },0) } },2000);}roll();如果還有別的方法，下次我會(huì)不定期更新的。不過(guò)移動(dòng)端的話(huà)這幾個(gè)應(yīng)該夠用了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
