溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Html5移動(dòng)端獲獎(jiǎng)無縫滾動(dòng)動(dòng)畫怎么弄

發(fā)布時(shí)間：2020-10-23 17:02:08 來源：億速云 閱讀：173 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)Html5移動(dòng)端獲獎(jiǎng)無縫滾動(dòng)動(dòng)畫怎么弄，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

具體如下：

需求分析

哈哈，上動(dòng)態(tài)圖真的是一下就明了了。

Html5移動(dòng)端獲獎(jiǎng)無縫滾動(dòng)動(dòng)畫怎么弄

就是滾動(dòng)么滾動(dòng)，那么制作這個(gè)有什么方法呢？我們來總結(jié)一下:

html骨架

其實(shí)很簡單，最外面的<p>是做固定的窗口，里面的<ul>控制運(yùn)動(dòng)，<li>里面是展示動(dòng)畫

<p 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>
</p>

基本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;
}

可以看看大致的樣式:

Html5移動(dòng)端獲獎(jiǎng)無縫滾動(dòng)動(dòng)畫怎么弄

實(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對象，
                        //ul復(fù)位之后把第一個(gè)元素和第二個(gè)元素插入
                        //到ul的最后一個(gè)元素的位置
                        $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
                        $(this).find("li:first").appendTo(this);
                });
            },1500)
        });

看看效果:

Html5移動(dòng)端獲獎(jiǎng)無縫滾動(dòng)動(dòng)畫怎么弄

二、使用css3的animation動(dòng)畫

通過css3中的關(guān)鍵幀，可以得到跳步的效果。先通過一個(gè)短的看一下思路。

初步

1.如果是寫死的獲獎(jiǎng)，那么需要把前面的那個(gè)復(fù)制一份到后面去，如果是一個(gè)一個(gè)滾動(dòng)那么就復(fù)制第一個(gè)，如果是兩個(gè)兩個(gè)滾動(dòng)的就復(fù)制第一個(gè)和第二個(gè)。

<p 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>
</p>

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)畫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)的距離就好。

1.首先獲取<li>的長度length
2.然后計(jì)算間隔百分比，因?yàn)橛型ｎD所以記得要用秒數(shù)×2
3.然后用字符串拼寫@keyframes，0~length，包括length，因?yàn)槎嘁粋€(gè)，雙數(shù)和單數(shù)分開。
4.把<ul>中的第一個(gè)和第二個(gè)克隆到<ul>的最后
5.創(chuàng)建一個(gè)<style>標(biāo)簽加入到<head>中
6.給<ul>添加動(dòng)畫屬性

話不多說上代碼：

   function addKeyFrame(){
       var ulObj = $("#roll ul"),  //獲取ul對象
             length = $("#roll li").length,  //獲取li數(shù)組長度
             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)該夠用了。

關(guān)于Html5移動(dòng)端獲獎(jiǎng)無縫滾動(dòng)動(dòng)畫怎么弄就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手