整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
近接到公司小程序項目首頁迭代改版的工作，涉及到文章圖文布局改版。主要是精選文章，在首頁推廣入口增加評論彈幕效果，后端彈幕數據是隨文章列表接口一次性返回給前端，由前端來處理彈幕數據及相關彈幕交互效果。
隨后，簡單分析了一下后端接口的數據結構，以及查詢了一些傳統web端彈幕的js實現方式。
鑒于我們當前業務的后端彈幕數據非動態持續發送，而是固定的評論條目，前端處理也僅僅是把文章評論渲染成彈幕并循環滾動，于是我采用的解決方案是通過css3的Animation動畫屬性來實現。
下面是拆分出來的部分代碼demo實現效果的動畫演示效果。
左邊的視頻演示：有序彈幕(固定軌道式，彈幕數據劃分為三條固定軌道進行滾動顯示)
右邊的視頻演示：無序彈幕(每條彈幕的出現位置隨機性)；
如果視頻無法播放的話，可以查看下方對比圖：
當前代碼邏輯比較適合一些展示型的前端交互效果，比如：資訊類欄目、社交屬性圖文欄目、推廣類廣告位等。
# 無序彈幕 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%); }
}
# 查看線上項目彈幕效果 #
# 詳細代碼片段及詳解，請私信喲#
輪事件：滾輪
滾動(卷動)事件：滾輪、拖拽滾動條、鍵盤方向鍵
<script type="text/javascript">
//滾輪事件：滾輪
//卷動事件：滾輪、拖拽滾動條、鍵盤?鍵
//IE和Chrome
gunlun.onmousewheel = function(){
this.innerHTML += "IE和Chrome<br/>";
}
//Firefox
gunlun.addEventListener("DOMMouseScroll", function(){
this.innerHTML += "Firefox<br/>";
})
</script>判斷滾輪方向
<script type="text/javascript">
//滾輪事件：滾輪
//卷動事件：滾輪、拖拽滾動條、鍵盤?鍵
//IE和Chrome
gunlun.onmousewheel = function(e){
var ev = e || window.event;
console.log(ev.wheelDelta);//判斷滾輪方向的
//上120
//下-120
this.innerHTML += "IE和Chrome<br/>";
}
//Firefox
gunlun.addEventListener("DOMMouseScroll",function(e){
var ev = e || window.event;
console.log(ev.detail);//滾輪方向
//上-3
//下3
this.innerHTML += "Firefox<br/>";
})
</script>兼容性封裝
用JavaScript實現頁面滑動到指定位置加載動畫。
若頁面滾動到class名為group-pic的元素的位置時開始加載
原理： 1.獲取瀏覽器窗口的高度；
2.獲取頁面滾動的高度；
3.獲取頁面距離文檔（document）頂部的高度
offset().top具體指的是距哪里的高度呢？
一些獲寬高度的屬性：
網頁可見區域寬： document.body.clientWidth;
網頁可見區域高： document.body.clientHeight;
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬);
網頁可見區域高： document.body.offsetHeight (包括邊線的寬);
網頁正文全文寬： document.body.scrollWidth;
網頁正文全文高： document.body.scrollHeight;
網頁被卷去的高： document.body.scrollTop;
網頁被卷去的左： document.body.scrollLeft;
網頁正文部分上： window.screenTop;
網頁正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的寬： window.screen.width;
屏幕可用工作區高度： window.screen.availHeight;
屏幕可用工作區寬度：window.screen.availWidth;
obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。
obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。
obj.offsetWidth 指 obj 控件自身的寬度，整型，單位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。
1.offsetTop : 當前對象到其上級層頂部的距離.
不能對其進行賦值.設置對象到頁面頂部的距離請用style.top屬性.
2.offsetLeft : 當前對象到其上級層左邊的距離.
不能對其進行賦值.設置對象到頁面左部的距離請用style.left屬性.
3.offsetWidth : 當前對象的寬度.
與style.width屬性的區別在于:如對象的寬度設定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值
4.offsetHeight : 與style.height屬性的區別在于:如對象的寬度設定值為百分比高度,則無論頁面變大還是變小,style.height都返回此百分比,而offsetHeight則返回在不同頁面中對象的高度值而不是百分比值
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
