您所在的位置:Web培训学院>web特效设计 > JS弹幕实现

JS弹幕实现

2017-12-27 18:04:59来源:互联网浏览次数:

实现原理

1、设置展示弹幕元素位置属性为relative

2、动态创建弹幕元素,位置属性设置absolute,left为展示宽度

3、随机设置弹幕元素top值

4、随机产生弹幕元素移动速率,修改left值
 

  1. 第一种实现 
  2. let color = '#' + Math.floor(Math.random() * 0xffffff).toString(16); 
  3.  
  4. 第二种实现 
  5. let color = '#' + Math.floor(Math.random() * 16777215).toString(16); 
  6.  
  7. 第三种实现 
  8. let r = Math.floor(Math.random()*256); 
  9. let g = Math.floor(Math.random()*256); 
  10. let b = Math.floor(Math.random()*256); 
  11. let color = `rgb(${r},${g},${b})`; 

随机颜色
 

  1. 50 * +Math.random().toFixed(2) 

随机速率

代码
 

  1. //html 
  2. <div class="container"
  3.     <div id="content" class="content"></div> 
  4.     <div class="content-opt"
  5.         <div id="content-text" class="content-text"></div> 
  6.         <div class="content-input"
  7.             <input id="text" type="text"
  8.             <button id="send">发送</button> 
  9.         </div> 
  10.     </div> 
  11. </div> 
  12.  
  13. //css 
  14. * { 
  15.     box-sizing: border-box; 
  16.     outline: none; 
  17.  
  18. p { 
  19.     margin: .5em; 
  20.     word-breakbreak-all; 
  21.  
  22. .container { 
  23.     position: relative; 
  24.     width: 700px; 
  25.     height: 500px; 
  26.     margin: auto; 
  27.     padding-right: 200px; 
  28.  
  29. .content { 
  30.     width: 100%; 
  31.     height: 100%; 
  32.     border: 1px solid #ccc; 
  33.  
  34. .content-opt { 
  35.     position: absolute; 
  36.     top: 0; 
  37.     right: 0; 
  38.     width: 200px; 
  39.     height: 100%; 
  40.  
  41. .content-text { 
  42.     height: calc(100% - 30px); 
  43.     margin-bottom: 30px; 
  44.     border: 1px solid #ccc; 
  45.     overflow: auto; 
  46.  
  47. .content-input { 
  48.     position: absolute; 
  49.     bottom: 0; 
  50.     width: 100%; 
  51.     height: 30px; 
  52.     border: 1px solid #ccc; 
  53.  
  54. .content-input input { 
  55.     width: 70%; 
  56.     padding: 2px; 
  57.     border-radius: 5px; 
  58.  
  59. .content-input button { 
  60.     padding: 3px 10px; 
  61.     border: none; 
  62.     border-radius: 5px; 
  63.     background: rgb(90, 154, 214); 
  64.  
  65. //js 
  66. (function () { 
  67.     class Barrage { 
  68.         constructor(id) { 
  69.             this.domList = []; 
  70.             this.dom = document.querySelector('#' + id); 
  71.             if (this.dom.style.position == '' || this.dom.style.position == 'static') { 
  72.                 this.dom.style.position = 'relative'
  73.             } 
  74.             this.dom.style.overflow = 'hidden'
  75.             let rect = this.dom.getBoundingClientRect(); 
  76.             this.domWidth = rect.right - rect.left; 
  77.             this.domHeight = rect.bottom - rect.top; 
  78.         } 
  79.  
  80.         shoot(text) { 
  81.             let div = document.createElement('div'); 
  82.             div.style.position = 'absolute'
  83.             div.style.left = this.domWidth + 'px'
  84.             div.style.top = (this.domHeight - 20) * +Math.random().toFixed(2) + 'px'
  85.             div.style.whiteSpace = 'nowrap'
  86.             div.style.color = '#' + Math.floor(Math.random() * 0xffffff).toString(16); 
  87.             div.innerText = text; 
  88.             this.dom.appendChild(div); 
  89.  
  90.             let roll = (timer) => { 
  91.                 let now = +new Date(); 
  92.                 roll.last = roll.last || now; 
  93.                 roll.timer = roll.timer || timer; 
  94.                 let left = div.offsetLeft; 
  95.                 let rect = div.getBoundingClientRect(); 
  96.                 if (left < (rect.left - rect.right)) { 
  97.                     this.dom.removeChild(div); 
  98.                 } else { 
  99.                     if (now - roll.last >= roll.timer) { 
  100.                         roll.last = now; 
  101.                         left -= 3; 
  102.                         div.style.left = left + 'px'
  103.                     } 
  104.                     requestAnimationFrame(roll); 
  105.                 } 
  106.             } 
  107.             roll(50 * +Math.random().toFixed(2)); 
  108.         } 
  109.  
  110.     } 
  111.  
  112.     let barage = new Barrage('content'); 
  113.  
  114.     function appendList(text) { 
  115.         let p = document.createElement('p'); 
  116.         p.innerText = text; 
  117.         document.querySelector('#content-text').appendChild(p); 
  118.     } 
  119.  
  120.     document.querySelector('#send').onclick = () => { 
  121.         let text = document.querySelector('#text').value; 
  122.         barage.shoot(text); 
  123.  
  124.         appendList(text); 
  125.     }; 
  126.  
  127.     const textList = ['弹幕''666''233333333''javascript''html''css''前端框架''Vue''React''Angular'
  128.         '测试弹幕效果' 
  129.     ]; 
  130.     textList.forEach((s) => { 
  131.         barage.shoot(s); 
  132.         appendList(s); 
  133.     }) 
  134. })() 

 

[免责声明]本文来源于网络转载,仅供学习交流使用,不构成商业目的。版权归原作者所有,如涉及作品内容、版权和其它问题请在30日内与本网联系,我们将在第一时进行处理

上一篇:three.js简介——3D框架

下一篇:前端与移动开发:H5C3-过渡效果失效的问题小结

热门标签

DIV滚动条

吐血推荐

中公优就业荣获知名IT品牌

中公优就业荣获中国教育在线“2017年度知名IT培训品牌”大奖


5分钟读懂HTML5
共有590人在学 | 免费
微信号:ujiuye
获取更多Web资源
中公教育IT培训品牌
官方微博
获取Web新动向
中公教育IT培训品牌