一步一步寫web之初識web（五-數據滾動實現）

趁着空擋趕緊寫！

一、數據滾動

這節想做的效果是在一個框內數據可以循環的向上滾動，只能說功能仿照永夜君王貼吧的捧場動態，樣式就不嚴格一樣了。

首先要呈現一個邊框出來

#rollText{
    position: absolute;
    width: 400px;
    border: 1px solid #333333;
    margin-top: 300px;
    height: 30px;
    top:30px;
    right: 50px;
    overflow: hidden;
}

 <div id="rollText">
            <p>這是第一行數據</p>
            <p>這是第二行</p>
            <p>第三行也出來了</p>
            <p>這是第四行數據</p>
            <!--<p>這是第五行數據</p>-->
            <!--<p>這是第六行數據</p>-->
            <!--<p>這是第七行數據</p>-->
            <!--<p>這是第八行數據</p>-->
        </div>

這裏的位置是放在三角形的右邊，多列顯示的上邊。註釋掉的幾行是擴展用的，現在的展示只是單列顯示滾動，如下圖

這四行數據可以循環的滾動，目前遇到一個困境，四個數據有間距，可以查看簡單數據滾動實現。接下來接着完善。

二、修改兩個數據間有空白

重新調節動畫的百分比，得到動畫效果2

/*動畫效果2*/
@-webkit-keyframes anim1{
    0% {top: 15px;opacity: 1}
    100% {top: -105px;opacity: 1}
}

@-webkit-keyframes anim2{
    0% {top: 45px;opacity: 1}
    100% {top: -75px;opacity: 1}
}

@-webkit-keyframes anim3{
    0% {top: 75px;opacity: 1}
    100% {top: -45px;opacity: 1}
}

@-webkit-keyframes anim4{
    0% {top: 105px;opacity: 1}
    100% {top: -15px;opacity: 1}
}

這裏的滾動效果基本上理想了，兩個數據無間隙的鏈接，但是有一個缺陷：數據滾動結束和首個數據銜接時有一個小的空白。依然不是很理想，仔細思考覺得應該還可以解決，差點走近死衚衕了，想轉向js處理的，又不知道能不能處理，最後想想應該是自己想錯了，所以有了動畫效果3。

三、動畫效果3

這次着重將思考問題的點放在收尾交接的地方，自己在紙上畫了又畫，最終理清了思路。

1、首行數據填充一半（下半部分），尾行數據填充上半部分

2、單獨計算尾行數據填滿展示的條框時首行數據應該在的位置，此時首行數據被分成了兩個部分

3、單獨計算尾行數據在首次加載時應移動的距離（條框不顯示的時候即可做其他處理）。

最終的樣式調整如下：

/*動畫效果3*/
@-webkit-keyframes anim1{
    0% {top:15px; opacity:1}
    37.5% {top:-30px; opacity:1}
    37.6% {top:-30px;opacity:0}
    74.9% {top:45px;opacity:0}
    75% {top:45px;opacity:1}
    100% {top:15px;opacity:1}
}

@-webkit-keyframes anim2{
    0%{top:45px;opacity:1}
    100%{top:-75px;opacity:1}
}

@-webkit-keyframes anim3{
    0%{top:75px;opacity:1}
    100%{top:-45px;opacity:1}
}

@-webkit-keyframes anim4{
    0%{top:-15px;opacity:1}
    25%{top:-45px;opacity:1}
    25.9%{top:-45px;opacity:0}
    62.4%{top:30px;opacity:0}
    62.5%{top:30px;opacity:1}
    100%{top:-15px;opacity:1}
}

代碼已同步到github，包括幾次嘗試的代碼也上傳了，最終的動畫3是想要的結果，動畫1、動畫2在代碼裏已註釋，需要的自行打開。githut地址：https://github.com/dwenb/webLearning。

初始web系列就此結束，下一章做一個總結。