需求分析
哈哈贿堰，上動(dòng)態(tài)圖真的是一下就明了了辙芍。
roll.gif
就是滾動(dòng)么滾動(dòng)，那么制作這個(gè)有什么方法呢羹与？我們來(lái)總結(jié)一下:
html骨架
其實(shí)很簡(jiǎn)單故硅，最外面的<div>是做固定的窗口，里面的<ul>控制運(yùn)動(dòng)纵搁，<li>里面是展示動(dòng)畫
<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;
}
可以看看大致的樣式:
css.jpg
實(shí)現(xiàn)思路
一吃衅、使用jquery的animate動(dòng)畫
animate()方法
$(selector).animate(styles,speed,easing,callback)
參數(shù)：
styles:必需參數(shù)，需要產(chǎn)生動(dòng)畫的css樣式(使用駝峰式命名)
speed: 規(guī)定動(dòng)畫的速度
@number:1000(ms)
@string:"slow","normal","fast"
easing:動(dòng)畫速度（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)畫運(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)
});
看看效果:
finish.gif
二、使用css3的animation動(dòng)畫
通過css3中的關(guān)鍵幀利职，可以得到跳步的效果趣效。先通過一個(gè)短的看一下思路。
初步
- 如果是寫死的獲獎(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>
- 然后計(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)畫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)畫*/
}
}
進(jìn)階
如果個(gè)數(shù)不確定伟端，那么就需要?jiǎng)討B(tài)的計(jì)算，用js動(dòng)態(tài)地添加@keyframes 匪煌，到時(shí)候只要自己可以計(jì)算清楚間隔還有移動(dòng)的距離就好责蝠。
- 首先獲取<li>的長(zhǎng)度length
- 然后計(jì)算間隔百分比，因?yàn)橛型ｎD所以記得要用秒數(shù)×2
- 然后用字符串拼寫
@keyframes萎庭，0~length霜医，包括length，因?yàn)槎嘁粋€(gè)驳规，雙數(shù)和單數(shù)分開肴敛。- 把<ul>中的第一個(gè)和第二個(gè)克隆到<ul>的最后
- 創(chuàng)建一個(gè)<style>標(biāo)簽加入到<head>中
- 給<ul>添加動(dòng)畫屬性
話不多說上代碼：
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)畫
}
addKeyFrame();
三、zepto+transition實(shí)現(xiàn)
移動(dòng)端的zepto沒有animate函數(shù)吗购，如果不用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()); //把第一個(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)在的高度如果沒有到最后就上移
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)畫合并
top -= 40;
ulObj.css({"-webkit-transition":"all 1s","transition":"all 1s","margin-top":top});
},0)
}
},2000);
}
roll();
如果還有別的方法，下次我會(huì)不定期更新的贯底。不過移動(dòng)端的話這幾個(gè)應(yīng)該夠用了丰辣。
@version1.0——2018.6.21——?jiǎng)?chuàng)建H5移動(dòng)端獲獎(jiǎng)無(wú)縫滾動(dòng)動(dòng)畫實(shí)現(xiàn)
?burning_韻七七
