From f2b0c455429b832d67ca8915656030738ab4ea4e Mon Sep 17 00:00:00 2001 From: panpeng Date: Thu, 25 Mar 2021 18:19:13 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=84=E7=90=86=E6=BA=A2=E5=87=BA=E5=BC=B9?= =?UTF-8?q?=E5=B9=95=E8=87=AA=E5=AE=9A=E4=B9=89=E6=A0=B7=E5=BC=8F=E5=A4=B1?= =?UTF-8?q?=E6=95=88=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/easy-Danmaku.js | 4 +- demo/easy-Danmaku.min.js | 4 +- demo/easyDanmaku.js | 4 +- package.json | 2 +- src/easyDanmaku.js | 244 +++++++++++++++++++-------------------- 5 files changed, 129 insertions(+), 129 deletions(-) diff --git a/demo/easy-Danmaku.js b/demo/easy-Danmaku.js index 95c0529..24b4d27 100644 --- a/demo/easy-Danmaku.js +++ b/demo/easy-Danmaku.js @@ -1,5 +1,5 @@ /*! - * eazyDanmuku v1.0.4 + * eazyDanmuku v1.0.7 * (c) 2020 Peng Pan * @license MIT */ @@ -329,7 +329,7 @@ class EasyDanmaku { this.clearIng = false; } }else{ - this.send(this.overflowArr[0].content,this.normalClass||this.wrapperStyle); + this.send(this.overflowArr[0].content, this.overflowArr[0].normalClass || this.wrapperStyle); this.overflowArr.shift(); } },500) diff --git a/demo/easy-Danmaku.min.js b/demo/easy-Danmaku.min.js index cc1ba9f..00211fa 100644 --- a/demo/easy-Danmaku.min.js +++ b/demo/easy-Danmaku.min.js @@ -1,6 +1,6 @@ /*! - * eazyDanmuku v1.0.4 + * eazyDanmuku v1.0.7 * (c) 2020 Peng Pan * @license MIT */ -"use strict";var _createClass=function(){function i(e,t){for(var n=0;ni.offsetWidth*t.coefficient&&(t.aisle[r].normalRow=!0,clearInterval(a))},16.66),setTimeout(function(){1!=i.getAttribute("relieveDel")&&(h&&h({runtime:o,target:i,width:i.offsetWidth}),i.remove())},1e3*o)):this.aisle.some(function(e){return!0===e.normalRow})?u.call(this):(t.overflowArr.push({content:n,normalClass:s}),t.clearIng||t.clearOverflowDanmakuArray())}0!=this.runstatus?n.length<1||(i=document.createElement("div"),r=0,o=this.speed,a=null,l=0,i.innerHTML=n,i.style.display="inline-block",i.classList.add("default-style"),(s||this.wrapperStyle)&&i.classList.add(s||this.wrapperStyle),u.call(this)):this.overflowArr.push({content:n,normalClass:s})}},{key:"batchSend",value:function(e,t,n){var i=this,r=1e.length-1?(clearInterval(l),i.originIndex=0,i.onComplete&&i.onComplete(),i.loop&&i.batchSend(i.originList,r,o)):(r?i.send("\n

"+e[i.originIndex].content+"

\n ",o||i.wrapperStyle):i.send(e[i.originIndex],o||i.wrapperStyle),i.originIndex++)},a/e.length*1e3)}},{key:"centeredSend",value:function(e,t,n,i){var r=2this.line-1)return;s.call(this)}}a.innerHTML=e,(t||this.wrapperStyle)&&a.classList.add(t||this.wrapperStyle),s.call(this)}},{key:"play",value:function(){for(var e=this.container.children,t=0;ti.offsetWidth*t.coefficient&&(t.aisle[r].normalRow=!0,clearInterval(a))},16.66),setTimeout(function(){1!=i.getAttribute("relieveDel")&&(h&&h({runtime:o,target:i,width:i.offsetWidth}),i.remove())},1e3*o)):this.aisle.some(function(e){return!0===e.normalRow})?u.call(this):(t.overflowArr.push({content:n,normalClass:s}),t.clearIng||t.clearOverflowDanmakuArray())}0!=this.runstatus?n.length<1||(i=document.createElement("div"),r=0,o=this.speed,a=null,l=0,i.innerHTML=n,i.style.display="inline-block",i.classList.add("default-style"),(s||this.wrapperStyle)&&i.classList.add(s||this.wrapperStyle),u.call(this)):this.overflowArr.push({content:n,normalClass:s})}},{key:"batchSend",value:function(e,t,n){var i=this,r=1e.length-1?(clearInterval(l),i.originIndex=0,i.onComplete&&i.onComplete(),i.loop&&i.batchSend(i.originList,r,o)):(r?i.send("\n

"+e[i.originIndex].content+"

\n ",o||i.wrapperStyle):i.send(e[i.originIndex],o||i.wrapperStyle),i.originIndex++)},a/e.length*1e3)}},{key:"centeredSend",value:function(e,t,n,i){var r=2this.line-1)return;s.call(this)}}a.innerHTML=e,(t||this.wrapperStyle)&&a.classList.add(t||this.wrapperStyle),s.call(this)}},{key:"play",value:function(){for(var e=this.container.children,t=0;t{ + timer = setInterval(() => { origin += unit; - if(origin > sheet.offsetWidth * this.coefficient){ + if (origin > sheet.offsetWidth * this.coefficient) { this.aisle[index].normalRow = true; clearInterval(timer); } - },16.66) + }, 16.66) // 删除已播放弹幕 setTimeout(() => { - if(sheet.getAttribute('relieveDel') == 1)return - if(callback)callback({ - runtime:speed, - target:sheet, - width:sheet.offsetWidth + if (sheet.getAttribute('relieveDel') == 1) return + if (callback) callback({ + runtime: speed, + target: sheet, + width: sheet.offsetWidth }); sheet.remove(); }, speed * 1000); - } - else { + } else { // 重新选择通道 let some = this.aisle.some(item => item.normalRow === true); - some ? containerAppendChild.call(this) : (()=>{ + some ? containerAppendChild.call(this) : (() => { this.overflowArr.push({ content, normalClass }); - if(!this.clearIng){ + if (!this.clearIng) { //开始清理溢出弹幕 - this.clearOverflowDanmakuArray(); + this.clearOverflowDanmakuArray(); } - })() + })() } } } @@ -165,28 +165,28 @@ class EasyDanmaku { * @param {string} normalClass 此批弹幕样式 * @public */ - batchSend(list,hasAvatar = false,normalClass=null) { + batchSend(list, hasAvatar = false, normalClass = null) { let runtime = this.runtime || list.length * 1.23; this.originList = list; this.hasAvatar = hasAvatar; this.normalClass = normalClass; - let timer = setInterval(()=>{ - if(this.originIndex>list.length-1){ + let timer = setInterval(() => { + if (this.originIndex > list.length - 1) { clearInterval(timer); this.originIndex = 0; - if(this.onComplete) this.onComplete(); - if(this.loop) this.batchSend(this.originList,hasAvatar,normalClass); - }else{ - if(hasAvatar){ + if (this.onComplete) this.onComplete(); + if (this.loop) this.batchSend(this.originList, hasAvatar, normalClass); + } else { + if (hasAvatar) { this.send(`

${list[this.originIndex].content}

- `,normalClass || this.wrapperStyle); - }else{ - this.send(list[this.originIndex],normalClass || this.wrapperStyle); + `, normalClass || this.wrapperStyle); + } else { + this.send(list[this.originIndex], normalClass || this.wrapperStyle); } this.originIndex++; } - },runtime / list.length * 1000) + }, runtime / list.length * 1000) } /** @@ -197,18 +197,18 @@ class EasyDanmaku { * @param {function} callback * @public */ - centeredSend(content, normalClass,duration = 3000,callback = null) { - + centeredSend(content, normalClass, duration = 3000, callback = null) { + let sheet = document.createElement('div'); let index = 0; sheet.innerHTML = content; - if (normalClass || this.wrapperStyle){ + if (normalClass || this.wrapperStyle) { sheet.classList.add(normalClass || this.wrapperStyle); } containerAppendChild.call(this); - function containerAppendChild(){ - if(this.aisle[index].vipRow){ + function containerAppendChild() { + if (this.aisle[index].vipRow) { this.container.appendChild(sheet); sheet.style.cssText = ` position:absolute; @@ -217,24 +217,24 @@ class EasyDanmaku { top: ${index * this.offsetValue}px; ` this.aisle[index].vipRow = false; - setTimeout(()=>{ - if(callback)callback({ - duration:duration, - target:sheet, - width:sheet.offsetWidth + setTimeout(() => { + if (callback) callback({ + duration: duration, + target: sheet, + width: sheet.offsetWidth }); sheet.remove(); this.aisle[index].vipRow = true; - },duration) + }, duration) - }else{ + } else { index++; - if(index > this.line - 1) return + if (index > this.line - 1) return containerAppendChild.call(this); } } - + } /** @@ -243,21 +243,21 @@ class EasyDanmaku { */ play() { const allDanmaku = this.container.children; - for(let i=0; i { target.remove(); }, this.speed * 1000); - }else if(status === extensiveStatus.pause){ + } else if (status === extensiveStatus.pause) { // 暂停 - const translateX = Utils.getStyle(target,'transform').match(RegExpforTranslateX)[1]; + const translateX = Utils.getStyle(target, 'transform').match(RegExpforTranslateX)[1]; target.style['transition'] = 'transform 0s linear'; target.style['transform'] = `translateX(-${translateX}px)`; - target.setAttribute('relieveDel',1); + target.setAttribute('relieveDel', 1); } } - + /** * @description 鼠标移入悬停 * @private */ handleMouseHover() { - Utils.eventDelegation(this.container,'default-style','mouseover',(activeDom)=>{ - activeDom.style['z-index']=1000; - this.controlDanmakurunStatus(activeDom,0); //暂停 - if(this.onHover)this.onHover(activeDom); + Utils.eventDelegation(this.container, 'default-style', 'mouseover', (activeDom) => { + activeDom.style['z-index'] = 1000; + this.controlDanmakurunStatus(activeDom, 0); //暂停 + if (this.onHover) this.onHover(activeDom); }) - Utils.eventDelegation(this.container,'default-style','mouseout',(activeDom)=>{ - activeDom.style.zIndex=1 - this.controlDanmakurunStatus(activeDom,1); //播放 - + Utils.eventDelegation(this.container, 'default-style', 'mouseout', (activeDom) => { + activeDom.style.zIndex = 1 + this.controlDanmakurunStatus(activeDom, 1); //播放 + }) } @@ -319,37 +319,37 @@ class EasyDanmaku { clearInterval(this.cleartimer); this.clearIng = true; let timerLimit = 0; - this.cleartimer = setInterval(()=>{ - if(this.overflowArr.length === 0){ - timerLimit ++; - - if(timerLimit > 20){ + this.cleartimer = setInterval(() => { + if (this.overflowArr.length === 0) { + timerLimit++; + + if (timerLimit > 20) { // 无新入溢出弹幕关闭清理 clearInterval(this.cleartimer); this.clearIng = false; } - }else{ - this.send(this.overflowArr[0].content,this.normalClass||this.wrapperStyle); + } else { + this.send(this.overflowArr[0].content, this.overflowArr[0].normalClass || this.wrapperStyle); this.overflowArr.shift(); } - },500) + }, 500) } } /** * @class 工具类 */ -class Utils{ - +class Utils { + /** - * @description 获取元素样式 - * @public - * @param {string} el 获取样式的节点 - * @param {string} attr 获取的样式名 - * @returns {string} 元素样式 - */ - static getStyle(el,attr){ - return window.getComputedStyle(el,null)[attr]; + * @description 获取元素样式 + * @public + * @param {string} el 获取样式的节点 + * @param {string} attr 获取的样式名 + * @returns {string} 元素样式 + */ + static getStyle(el, attr) { + return window.getComputedStyle(el, null)[attr]; } /** @@ -360,10 +360,10 @@ class Utils{ * @param {function} callBackFn 触发事件的回调(e:触发事件的元素) * @private */ - static eventDelegation(parent,childName,EventName,callBackFn){ + static eventDelegation(parent, childName, EventName, callBackFn) { parent.addEventListener(EventName, (e) => { const containerDom = e.target; - if(containerDom.className.includes(childName)){ + if (containerDom.className.includes(childName)) { callBackFn(containerDom) } })