jQuery实现弹幕APP的实例分析

  • 时间:
  • 8978人关注

这篇文章主要为大家详细介绍了基于jQuery实现弹幕APP的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,另外这篇文章主要知识点是关于jQuery、弹幕、APP、jQuery弹幕的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子资料:

教程详情电子资料
  • 教程类别:jQuery弹幕
  • 编辑整理:蒋高懿
  • 教程字数:2992字节
  • 阅读时间:大概9分钟
  • 下载本教程(DOC版)
  • jQuery 前端开发实战
  • Web编程基础:CSS、JavaScript、jQuery
  • Web前端开发技术(jQuery+Ajax 慕课版)
  • jQuery Mobile从入门到精通
  • jQuery实战
  • 今天闲着无聊,写了个弹幕APP,主要实现以下几个功能:

    1.点击“弹幕发射”或回车可以输出弹幕到弹幕墙上。
    2.弹幕的运行轨迹是从弹幕墙的最右边到最左边,Y轴的数值在弹幕墙的高度内随机,颜色HEX随机,速度随机。
    3.右侧的表格可以储存弹幕内容以及弹幕的发射时间,越靠近现在的越靠前。
    4.点击“清除弹幕”可以把弹幕墙内的所有弹幕清除掉,但不会影响到表格中的数据。
    5.如果弹幕长度过长(我设置的是6个字符),则超过规定长度之外的弹幕内容都会由“...”代替,并放入表格中。但弹幕墙中的内容依然是完整的。

    基于jQuery实现弹幕APP

    HTML代码:

    <div class="frame"> 
     <div class="row"> 
     <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 danmu-box-frame"> 
      <div class="danmu-box"> 
      </div> 
     </div> 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 danmu-table-frame"> 
      <table class="table .table-condensed danmu-table"> 
      <thead> 
       <tr> 
       <th> 
        弹幕内容 
       </th> 
       <th> 
        弹幕时间 
       </th> 
       </tr> 
      </thead> 
      <tbody> 
      </tbody> 
      </table> 
     </div> 
     </div> 
     <div class="danmu-form"> 
     <form class="form-inline"> 
      <input type="text" class="form-control" placeholder="开始吐槽!"> 
      <button type="button" class="btn btn-primary shoot"> 
      发射弹幕! 
      </button> 
      <button type="button" class="btn btn-danger clear"> 
      清空弹幕 
      </button> 
     </form> 
     </div> 
    </div> 
    <hr> 
    <footer> 
     Designed By 
     <a href="http://blog.csdn.net/alenhhy" target="_blank"> 
     Alen Hu 
     </a> 
    </footer> 
    

    *使用了Bootstrap3框架。

    JQuery部分:

    $(document).ready(function() { 
     $(".shoot").on("click", startDanmu); 
     $("form").keypress(function(event) { 
     if (event.keyCode === 13) { 
      event.preventDefault(); 
      startDanmu(); 
     } 
     }); 
     $(".clear").on("click", clearDanmu); 
    }); 
     
    //get random number in certain range 
    function RandomNum(Min, Max) { 
     var Range = Max - Min; 
     var Rand = Math.random(); 
     var num = Min + Math.round(Rand * Range); 
     return num; 
    } 
     
    //time number add 0 before if <10 
    function plusZero(x) { 
     if (x < 10) { 
     x = "0" + x; 
     } else { 
     x = x; 
     } 
     return x; 
    } 
     
    //start danmu 
    function startDanmu() { 
     
     var message = $("input"); 
     var messageVal = message.val(); 
     var danmuMessage = "<span class='danmu-message'>" + messageVal + "</span>"; 
     
     //get random color HEX 
     //u can also save the colors u want by array 
     var color = RandomNum(100000, 999999); 
     
     //get random danmu speed 
     var speed = RandomNum(10000, 20000); 
     
     //get random position Y 
     //danmu box height is 450, we set the danmu position Y max 400 in case it blocks the subtitle 
     var positionY = RandomNum(50, 400); 
     
     if (messageVal.length > 0) { 
     //insert danmu message into danmu box 
     $(".danmu-box").prepend(danmuMessage); 
     
     //have to use first() cuz we prepend the message, u can try what's gonna happen if no first() 
     //set it's style 
     $(".danmu-message").first().css({ 
      "right": "0", 
      "top": positionY, 
      "color": "#" + color 
     }); 
     
     //set it's animation 
     //from right 0 to left 0 
     //hide it after move 
     $(".danmu-message").first().animate({ 
      left: '0px', 
     }, 
     speed, 
     function() { 
      $(this).fadeOut(); 
     }); 
     //get danmu time 
     var time = new Date(); 
     var month = time.getMonth() + 1; 
     var day = time.getDay(); 
     var hour = time.getHours(); 
     var minute = time.getMinutes(); 
     var danmuTime = plusZero(month) + "-" + plusZero(day) + " " + plusZero(hour) + ":" + plusZero(minute); 
     
     //insert danmu message to table 
     if (messageVal.length > 6) { 
      messageVal = messageVal.substring(0, 6) + "..."; 
     } 
     var messageToTable = "<tr><td>" + messageVal + "</td><td>" + danmuTime + "</td></tr>"; 
     $(".danmu-table > tbody").prepend(messageToTable); 
     
     } else {} 
     
     //empty the input 
     message.val(""); 
    } 
     
    //clear danmu box 
    function clearDanmu() { 
     $(".danmu-box").html(""); 
    } 
    

    DEMO在这儿,欢迎来FORK:Danmu APP。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

    码农之家
    简单实现jQuery弹幕效果

    14小时22分钟前回答

    简单实现jQuery弹幕效果

    在要写一个弹幕案例的时候,首先要清楚每一步要干什么。
    首先搭好框架之后在要发送弹幕时应该准备进行如下步骤:

    • 获取到要发送到弹幕上的内容,即获取到文本框输入的内容。通过jquery的var str = $(“#文本框的id”).val();
    • 生成一个元素:利用jQuery的 var createSpan =$(““)生成一个span元素,以便发送。
    • 给刚创建的span赋值,即获取到的文本框中的值 createSpan.text(str );
    • 设置元素的动画效果,是元素动起来。利用jQuery的animate(css样式值,时间, 执行完动画调用的方法)。执行完动画得手动移除刚刚所添加的元素。

    里面还有许多细节,仔细看就会有收获!

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset = "utf-8" />
     <title>弹幕案例</title>
     <script src = "http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
     <script>
     $(function(){
      var boxDom = $("#boxDom");
      //var domContent = $("#domContent");
    
      var top, right;
    
      var pageWidth = parseInt($(document).width());
      var pageHeight =parseInt($(document).height());
    
      //点击按钮
      $("#btn").bind("click",auto);//按钮绑定方法
      //按下回车
      document.onkeydown = function(){
       if(event.keyCode == 13){
        auto();
       }
      }
      function auto(){
      //1.获取输入的字符串
      var str = $(".text").val();
      //2.生成一个元素
      var createSpan = $("<span class = 'string' ></span>");
    
      //3.给生成的元素赋值
    
      createSpan.text(str);
    
      //为了页面友好,清空刚刚输入的值
      $(".text").val("");
    
     //生成元素一个随机的位置,为了使每条弹幕都出现在屏幕上不同的位置
      top = Math.floor(Math.random()*pageHeight);
    
    
     createSpan.css({"top":top, "right": -400, "color": getRandomColor()});
      boxDom.append(createSpan);
    
      //4.设置元素的动画效果,animate(css样式值,时间, 执行完动画调用的方法)
    
      //页面上有N个span,只让最后一个动起来
      var spandom = $("#boxDom>span:last-child");//找到最后一个span
      spandom.animate({"right":pageWidth+300},10000,function(){
       //移除元素
       $(this).remove();
    
      });
      }
      //定义一个可以生成随机颜色的方法,可以使每条弹幕的颜色不同
      function getRandomColor(){
       var colorArr = ['1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
       var color = "";
       for(var i = 0; i < 6; i++){
        color += colorArr[Math.floor(Math.random()*16)]; 
       }
       return "#"+color;
      }
    
     });
     </script>
     <style type="text/css">
     html,body{
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
      font-family: "微软雅黑";
      background: #ccc;
     }
     .boxDom{
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
     }
     .idDom{
      width: 100%;
      height: 60px;
      background:#666;
      position: fixed;
      bottom: 0px;
     }
     .contet{
      width: 500px;
      height: 40px;
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      margin: auto;
    
     }
     .title{
      display: inline;
      font-size: 24px;
      vertical-align: bottom;
      color: #ffffff;
      padding-left: 300px;
     }
    
     .text{
      width: 300px;
      height: 30px;
      border:none;
      border-radius:5px;
      font-size: 20px;
      margin-left:60px;
     }
     .btn{
      width: 60px;
      height: 30px;
      color: #ffffff;
      background-color: red;
      border:none;
      font-size:16px;
      margin-left:60px;
      margin-top: 20px;
     }
     .string {
       width: 300px;
       height: 40px;
       margin-top: 20px;
       position: absolute;
       color: #000;
       font-size: 20px;
       font-family: "微软雅黑";
    
     }
     </style>
    </head>
    <body>
    <div class = "boxDom" id = "boxDom">
     <img src="../images/bg_2.jpg"  />
     <div id = "idDom" class = "idDom">
      <div class = "content">
       <p class = "title"> 说点什么:</p>
       <input type = "text" class = "text"/>
       <button type = "button" class = "btn" id = "btn" >发送</button>
      </div>
     </div>
    </div>
    </body>
    </html>
    

    效果图如下:

    简单实现jQuery弹幕效果

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

    展开阅读

    上一篇:jQuery代码实现表格隔行变色和点击行变色功能

    下一篇:深入理解jQuery.trim() 函数及trim()用法

    相关内容

    • jQuery实现弹幕效果的代码

      精彩的弹幕效果分享给大家,具有一定的参考价值,感兴趣的朋友可以尝试制作弹幕,具体内容如下

      01-17又一枚精彩的弹幕效果jQuery实现

      阅读更多
    • jquery实现弹幕效果示例代码

      这篇文章主要为大家详细介绍了基于jquery实现弹幕效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

      01-27基于jquery实现弹幕效果

      阅读更多
    • Bootstrap与jQuery UI框架设计

      Bootstrap与jQuery UI框架设计

      随着各类移动终端设备的普及 之前针对PC端设计的网站已经无法满足用户的需求 响应式网页设计的概念应运而生。无论用户使用笔记本还是iPad 页面都应该能够自动切换分辨率、图片尺寸及相

      大小:180 MBjQuery

      点击下载
    • jQuery实战从入门到精通

      jQuery实战从入门到精通

      本书以理论与实践相结合的方式详尽讲述了 jQuery 基础、jQueryUI、jQuerMobile 相关知识和实战开发技术,适合作为jQuery 入门、jQuery Ajax、jQuery UI、jQuery Mobile 开发及案例方面的自学用书

      大小:189.1 MBjQuery

      点击下载
    • Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践

      Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践

      本书是著名前端开发大牛阮晓龙老师爽作,HTML5、CSS3、jQuery、AJAX一站搞定,一本真正好学、实用又精彩的书,讲述了用HTML5 CSS3设计构建网站的必备知识,欢迎下载

      大小:167.1 MB前端开发

      点击下载
    • jQuery EasyUI开发指南

      jQuery EasyUI开发指南

      使用Java开发软件的开发人员一定会接触到前端开发,而前端开发有一个流行趋势,那就是插件开发。jQuery EasyUI是目前Java Web领域流行的插件开发工具。《jQuery EasyUI开发指南》主要讲述EasyUI各种

      大小:48.4 MBjQuery

      点击下载

    学习笔记

    13小时47分钟前回答

    jQuery实现弹幕效果的代码

    简易弹幕效果:将发布的内容随机显示在弹幕右侧,逐渐左移最后消失。 涉及知识点:val()、random()、height()、css()、append()、remove()等,主要是元素的操作 html代码: a href=#弹幕技术/a div class=mask a href=# class=buttonX/a /div !-- 底部发言框前端 -- div class=bottom input class=content/input a href=# class=send发表言论/a /div css代码: html,body{ background-image:url(images/208.jpg); height:100%;//文字的显示区域要设置好 } div.mask{ position:fixed; width:100%; height:100%; background-color:black; opacity:0.5; top:0px; left:0px; } div.bottom{ width:100%; height:77px; background-color:#090909; position:fixed; bottom:0px; left:0px; text-align:center; line-height:77px; } div.bottom input.content{ width:605px; heig……

    44小时49分钟前回答

    简单实现jQuery弹幕效果

    在要写一个弹幕案例的时候,首先要清楚每一步要干什么。 首先搭好框架之后在要发送弹幕时应该准备进行如下步骤: 获取到要发送到弹幕上的内容,即获取到文本框输入的内容。通过jquery的var str = $(“#文本框的id”).val(); 生成一个元素:利用jQuery的 var createSpan =$(““)生成一个span元素,以便发送。 给刚创建的span赋值,即获取到的文本框中的值 createSpan.text(str ); 设置元素的动画效果,是元素动起来。利用jQuery的animate(css样式值,时间, 执行完动画调用的方法)。执行完动画得手动移除刚刚所添加的元素。 里面还有许多细节,仔细看就会有收获! !DOCTYPE htmlhtmlheadmeta charset = "utf-8" / title弹幕案例/title sc……