JS实现的视频弹幕效果示例

本文实例讲述了JS实现的视频弹幕效果。分享给大家供大家参考，具体如下：

  
  
  
  
    html,body{font-size:10px;overflow:hidden;margin:0;padding:0;}
    #box{width:100%;height:100%;}
    #dm{width:100%;height:90vh;background:#E8F1F5;}
    #dm span{width:auto;height:3rem;font-size:2rem;line-height:2rem;position:absolute;white-space:nowrap;}
    #idDom{width:100%;height:10vh;background:#666;position:absolute;bottom:0;display:flex;align-items:center;justify-content:center;}
    #content{width:50rem;height:10vh;display:flex;align-items:center;justify-content:center;}
    .title{font-size:2.2px rein;color:#fff;line-height:#ccc;}
    .text{width:30rem;height:2.5rem;border:none;border-radius:.5rem;font-size:1.4rem;margin:0 .5rem;padding:0 1rem;}
    .btn{width:6rem;height:3rem;border:none;background:red;color:#fff;}
  



  
  
    
      
吐槽:
      
      发射!
    
  

运行效果如下图所示：

感兴趣的朋友可以使用在线HTML/CSS/Javascript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试代码运行效果。

更多关于Javascript相关内容感兴趣的读者可查看本站专题：《Javascript动画特效与技巧汇总》、《Javascript页面元素操作技巧总结》、《Javascript运动效果与技巧汇总》、《Javascript图形绘制技巧总结》、《Javascript切换特效与技巧总结》、《Javascript错误与调试技巧总结》、《Javascript数据结构与算法技巧总结》及《Javascript数学运算用法总结》

希望本文所述对大家Javascript程序设计有所帮助。