前端入坑紀(jì) 03

讓假期來得更猛烈些吧！今天假期第一天，來個(gè)新聞滾動！

今天總感覺直接切換過來太突兀，想想還是這樣做個(gè)無縫的好！

頭等大事：項(xiàng)目鏈接

HTML 結(jié)構(gòu)

    <div class="ulwrp">
        <ul id="oul">
            <li>新聞標(biāo)題內(nèi)容示例001</li>
            <li>新聞標(biāo)題內(nèi)容示例002</li>
            <li>新聞標(biāo)題內(nèi)容示例003</li>
            <li>新聞標(biāo)題內(nèi)容示例004</li>
            <li>新聞標(biāo)題內(nèi)容示例005</li>
            <li>新聞標(biāo)題內(nèi)容示例006</li>
        </ul>
    </div>

CSS 結(jié)構(gòu)

        ul,
        li {
            text-align: center;
            padding: 0;
            margin: 0;
        }
        
        .ulwrp {
            height: 35px;
            line-height: 35px;
            overflow: hidden;
        }
        ul>li {
            height: 35px;
            line-height: 35px;
        }
        ul>li:nth-child(even) {
            color: #666;
            background: lightyellow;
        }
        
        ul>li:nth-child(odd) {
            color: #fff;
            background: lightskyblue;
        }

關(guān)鍵的JavaScript

        var oul = document.getElementById('oul');
        var olis = oul.getElementsByTagName('li');
        var indexNum = 0;
        // 創(chuàng)建個(gè)新的li，里面包含第一個(gè)li的內(nèi)容
        var ofst = document.createElement("li");
        ofst.innerText = olis[0].innerText;
       // 將新的li添加到ul里
        oul.appendChild(ofst);
      // 獲取當(dāng)前最新的長度
        var liLens = olis.length;

        function sclNews() {
            indexNum++;
            //判定是否到達(dá)最后行
            if (indexNum < liLens) {
                oul.style.transition = "transform .5s ease-in"; //添加css過渡時(shí)的效果
                // 每次滾動的距離是 單行高*行數(shù)
                oul.style.transform = "translateY(-" + 35 * indexNum + "px)";
            } else {
                indexNum = 0;
                oul.style.transition = ""; //去除css過渡效果
                oul.style.transform = "translateY(-" + 35 * indexNum + "px)";
                // 當(dāng)從列表底部回到頭部時(shí)，立馬切換到第二個(gè)li，預(yù)留了100毫秒給js處理，所以這里花費(fèi)的總時(shí)間是1900ms
                setTimeout(function() {
                    indexNum = 1;
                    oul.style.transition = "transform .5s ease-in";
                    oul.style.transform = "translateY(-" + 35 * indexNum + "px)";
                }, 100)
            }
        }
        // 每隔1800ms執(zhí)行
        setInterval(sclNews, 1800)

其實(shí)這里的過渡效果可以直接寫在 css 對應(yīng)的 class 里面。筆者這么寫，只是為了滾到底部時(shí)，效果不要重新又滾動回去，而是直接切換。簡單來說就是把最后行到第一行的過渡效果取消了。

Ps:My skill's not better enough! 如有錯漏，還請不吝賜教