基于JavaScript实现弹幕特效

246 阅读 0 评论 163 点赞

我是靠谱客的博主陶醉钻石，最近开发中收集的这篇文章主要介绍基于JavaScript实现弹幕特效，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文实例为大家分享了js实现弹幕特效的具体代码，供大家参考，具体内容如下

此处使用HBuilder编译，最简单的弹幕效果，希望各位前辈不吝指教。

注意用的是jquery-2.0.3.js

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="utf-8" /> 
  <title></title> 
 </head> 
  
 <style type="text/css"> 
  *{ 
   padding: 0; 
   margin: 0; 
  } 
  .shooter{ 
   width: 600px; 
   height: 60px; 
   /*background: black;*/ 
   margin: 0 auto; 
  } 
  .shooter input{ 
   width: 300px; 
   height: 40px; 
   border: none; 
   border-radius: 7px; 
   box-shadow: 0 0 8px rgba(182,195,214,0.6)inset; 
   padding-left: 15px; 
   margin-top: 10px; 
  } 
  .shooter button{ 
   width: 80px; 
   height: 40px; 
   border: none; 
   margin-left: 10px; 
   background-color:#339B53; 
   border-radius:8px; 
   color: white; 
   cursor: pointer; 
  } 
   
  .shooter button:hover{ 
   font-size: 14px; 
   background:#008000; 
  } 
  .content{ 
   width: 100%; 
   height: 600px; 
   background: gray; 
   position: relative; 
   overflow: hidden; 
  } 
   
  .bullet{ 
   position: absolute; 
   /*right: 0;*/ 
   /*left:1600px;*/ 
   word-break: keep-all; 
   /*不让单词折行*/ 
    
    
  } 
   
 </style> 
  
 <body> 
  <div class="shooter"> 
    
   <input type="text"/> 
   <button>发射</button> 
    
  </div> 
  <div class="content"> 
    
  </div> 
  <script type="text/javascript" src="js/jquery-2.0.3.js" ></script> 
   
  <script type="text/javascript"> 
   $("button").click(function(){ 
     
    var msg = $("input").val(); 
    //取出输入框内容 
     
    if(msg.length > 15){ 
      
     alert("字数不得超过15个！"); 
     return; 
    } 
     
    var bullet = $("<div>"); 
    //生成一条弹幕 
    bullet.text(msg); 
    //将输入框内容放置到div中 
    bullet.addClass("bullet"); 
    //为bullet这个div添加样式bullet 
    bullet.css("top",Math.round(Math.random()*500)); 
    //随机设置弹幕位置 
    bullet.css("left","1600px"); 
    bullet.css("font-size",Math.round(Math.random()*60)+12+"px"); 
    bullet.css("color","rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")"); 
//    alert(window.getComputedStyle(bullet,null).width); 
    bullet.animate({ 
     left:-1000//此处视为bug，应该随着弹幕的长短而变化 
    },Math.round(Math.random()*9000)+1000,"linear", function(){ 
     bullet.remove(); 
     //当运动结束时，删除弹幕 
    }); 
     
    $(".content").append(bullet); 
    //将弹幕添加到屏幕中 
     
     
   }); 
  </script> 
 </body> 
</html>

下面是展示的弹幕效果（显示的白线在谷歌浏览器中是看不出来的，在录制时会看出来，此处又一bug）：