趁着空擋趕緊寫!
一、數據滾動
這節想做的效果是在一個框內數據可以循環的向上滾動,只能說功能仿照永夜君王貼吧的捧場動態,樣式就不嚴格一樣了。
首先要呈現一個邊框出來
#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系列就此結束,下一章做一個總結。