近接到公司小程序項(xiàng)目首頁迭代改版的工作，涉及到文章圖文布局改版。主要是精選文章，在首頁推廣入口增加評(píng)論彈幕效果，后端彈幕數(shù)據(jù)是隨文章列表接口一次性返回給前端，由前端來處理彈幕數(shù)據(jù)及相關(guān)彈幕交互效果。

隨后，簡(jiǎn)單分析了一下后端接口的數(shù)據(jù)結(jié)構(gòu)，以及查詢了一些傳統(tǒng)web端彈幕的js實(shí)現(xiàn)方式。

鑒于我們當(dāng)前業(yè)務(wù)的后端彈幕數(shù)據(jù)非動(dòng)態(tài)持續(xù)發(fā)送，而是固定的評(píng)論條目，前端處理也僅僅是把文章評(píng)論渲染成彈幕并循環(huán)滾動(dòng)，于是我采用的解決方案是通過css3的Animation動(dòng)畫屬性來實(shí)現(xiàn)。

下面是拆分出來的部分代碼demo實(shí)現(xiàn)效果的動(dòng)畫演示效果。

左邊的視頻演示：有序彈幕(固定軌道式，彈幕數(shù)據(jù)劃分為三條固定軌道進(jìn)行滾動(dòng)顯示)

右邊的視頻演示：無序彈幕(每條彈幕的出現(xiàn)位置隨機(jī)性)；

如果視頻無法播放的話，可以查看下方對(duì)比圖：

當(dāng)前代碼邏輯比較適合一些展示型的前端交互效果，比如：資訊類欄目、社交屬性圖文欄目、推廣類廣告位等。

# 無序彈幕 wxml #

<view class='dmGroup' wx:for="{{ dmData }}" wx:key="{{ item.id }}" style="top:{{ item.top }}%; animation: dmAnimation {{item.time}}s linear {{ index*3 }}s infinite; ">
 <view class='dmItem'>
 <view class='dm'>
 <view class='avatarBox'>
 <image src='{{ item.sex == 0 ? avatarBoy : avatarGirl }}' class='avatar' mode='aspectFit'></image>
 <image src='{{ item.sex == 0 ? iconBoy : iconGirl }}' class='sex' mode='aspectFit'></image>
 </view>
 <text class='content'>{{ item.content }}</text>
 <image src='{{ iconGood }}' class='icon good' mode='aspectFill'></image>
 <text>{{ item.zanNumber }}</text>
 </view>
 </view>
</view>

# 無序彈幕 wxss #

@keyframes dmAnimation{
 from{ left: 100%; }
 to{ left: -100%; }
}

# 有序彈幕(軌道式) wxml #

<!-- top -->
<view class='dmGroup top' style="animation: dmAnimation2 35s linear infinite; ">
 <view class='dmItem' wx:for="{{ dmData }}" wx:if="{{ index < 6 }}" wx:key="{{ item.id }}">
 <view class='dm'>
 <view class='avatarBox'>
 <image src='{{ item.sex == 0 ? avatarBoy : avatarGirl }}' class='avatar' mode='aspectFit'></image>
 <image src='{{ item.sex == 0 ? iconBoy : iconGirl }}' class='sex' mode='aspectFit'></image>
 </view>
 <text class='content'>{{ item.content }}</text>
 <image src='{{ iconGood }}' class='icon good' mode='aspectFill'></image>
 <text>{{ item.zanNumber }}</text>
 </view>
 </view>
</view>
<!-- mid -->
<view class='dmGroup mid' style="animation: dmAnimation2 30s linear 1s infinite; ">
 <view class='dmItem' wx:for="{{ dmData }}" wx:if="{{ index > 5 && index < 10 }}" wx:key="{{ item.id }}">
 <view class='dm'>
 <view class='avatarBox'>
 <image src='{{ item.sex == 0 ? avatarBoy : avatarGirl }}' class='avatar' mode='aspectFit'></image>
 <image src='{{ item.sex == 0 ? iconBoy : iconGirl }}' class='sex' mode='aspectFit'></image>
 </view>
 <text class='content'>{{ item.content }}</text>
 <image src='{{ iconGood }}' class='icon good' mode='aspectFill'></image>
 <text>{{ item.zanNumber }}</text>
 </view>
 </view>
</view>
<!-- btm -->
<view class='dmGroup btm' style="animation: dmAnimation2 45s linear infinite; ">
 <view class='dmItem' wx:for="{{ dmData }}" wx:if="{{ index > 9 }}" wx:key="{{ item.id }}">
 <view class='dm'>
 <view class='avatarBox'>
 <image src='{{ item.sex == 0 ? avatarBoy : avatarGirl }}' class='avatar' mode='aspectFit'></image>
 <image src='{{ item.sex == 0 ? iconBoy : iconGirl }}' class='sex' mode='aspectFit'></image>
 </view>
 <text class='content'>{{ item.content }}</text>
 <image src='{{ iconGood }}' class='icon good' mode='aspectFill'></image>
 <text>{{ item.zanNumber }}</text>
 </view>
 </view>
</view>

# 有序彈幕 wxss #

@keyframes dmAnimation2{ 
 0% { transform: translateX(0); } 
 100% { transform: translateX(-130%); } 
}

# 查看線上項(xiàng)目彈幕效果 #

# 詳細(xì)代碼片段及詳解，請(qǐng)私信喲#

用JavaScript實(shí)現(xiàn)頁面滑動(dòng)到指定位置加載動(dòng)畫。

若頁面滾動(dòng)到class名為group-pic的元素的位置時(shí)開始加載

1. 
   
2. $(document).ready(function(){
3. var a,b,c;
4. a = $(window).height(); //瀏覽器窗口高度
5. var group = $(".group-pic");
6. $(window).scroll(function(){
7. b = $(this).scrollTop(); //頁面滾動(dòng)的高度
8. c = group.offset().top; //元素距離文檔（document）頂部的高度
9. if(a+b>c){
10. ...
11. }else{
12. ...
13. }
14. });
15. });

原理： 1.獲取瀏覽器窗口的高度；

2.獲取頁面滾動(dòng)的高度；

3.獲取頁面距離文檔（document）頂部的高度

offset().top具體指的是距哪里的高度呢？

一些獲寬高度的屬性：

網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth;

網(wǎng)頁可見區(qū)域高： document.body.clientHeight;

網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬);

網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的寬);

網(wǎng)頁正文全文寬： document.body.scrollWidth;

網(wǎng)頁正文全文高： document.body.scrollHeight;

網(wǎng)頁被卷去的高： document.body.scrollTop;

網(wǎng)頁被卷去的左： document.body.scrollLeft;

網(wǎng)頁正文部分上： window.screenTop;

網(wǎng)頁正文部分左： window.screenLeft;

屏幕分辨率的高： window.screen.height;

屏幕分辨率的寬： window.screen.width;

屏幕可用工作區(qū)高度： window.screen.availHeight;

屏幕可用工作區(qū)寬度：window.screen.availWidth;

obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。

obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。

obj.offsetWidth 指 obj 控件自身的寬度，整型，單位像素。

obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。

1.offsetTop : 當(dāng)前對(duì)象到其上級(jí)層頂部的距離.

不能對(duì)其進(jìn)行賦值.設(shè)置對(duì)象到頁面頂部的距離請(qǐng)用style.top屬性.

2.offsetLeft : 當(dāng)前對(duì)象到其上級(jí)層左邊的距離.

不能對(duì)其進(jìn)行賦值.設(shè)置對(duì)象到頁面左部的距離請(qǐng)用style.left屬性.

3.offsetWidth : 當(dāng)前對(duì)象的寬度.

與style.width屬性的區(qū)別在于:如對(duì)象的寬度設(shè)定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁面中對(duì)象的寬度值而不是百分比值

4.offsetHeight : 與style.height屬性的區(qū)別在于:如對(duì)象的寬度設(shè)定值為百分比高度,則無論頁面變大還是變小,style.height都返回此百分比,而offsetHeight則返回在不同頁面中對(duì)象的高度值而不是百分比值