JQuery和HTML5 Canvas实现弹幕效果


Posted in Javascript onJanuary 04, 2017

 JQuery和HTML5 Canvas两种方法实现弹幕效果:

JQuery和HTML5 Canvas实现弹幕效果

方法一,JQuery实现
源码:

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <!-- 
  <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
  <link href="favicon.ico" rel="Bookmark" type="image/x-icon" /> 
  --> 
  <meta name="Generator" content="EditPlus®"> 
  <meta name="Author" content=""> 
  <meta name="Keywords" content=""> 
  <meta name="Description" content=""> 
  <title>JQuery弹幕</title> 
  <link href="" rel="stylesheet" /> 
  <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> 
  <style type="text/css"> 
    .ctxt{ 
      background:#666; 
      width:1000px; 
      height:400px; 
      overflow:hidden; 
      margin:0 auto; 
    } 
    .ctxt p{ 
      position:relative; 
      left:1000px; 
      margin:0; 
      padding:0; 
    } 
  </style> 
</head> 
<body> 
<div id="" class="ctxt"></div> 
<br /> 
<form method="post" action="" align="center"> 
  <input type="text" id="msg" style="height:24px;width:200px;" /> <button type="button" id="submitBut">发布</button> 
</form> 
 
<script type="text/javascript"> 
$(document).ready(function(){ 
 
  $("#submitBut").click(function(){ 
    var msgtxt=$("#msg").val(); 
    var colortxt = getReandomColor(); 
    var topPos = generateMixed(3); 
    if (topPos > 300) 
    { 
      topPos = 30; 
    } 
    var newtxt = '<p style="top:'+topPos+'px; color:'+colortxt+'">'+$("#msg").val()+'</p>'; 
    $(".ctxt").prepend(newtxt); 
    var addTextW = $(".ctxt").find("p").width(); 
    $(".ctxt p").animate({left: '-'+addTextW+"px"}, 30000,function(){ 
      $(this).hide(); 
    }); 
  }); 
 
}); 
//随机获取颜色值 
  function getReandomColor(){ 
    return '#'+(function(h){ 
    return new Array(7-h.length).join("0")+h 
    })((Math.random()*0x1000000<<0).toString(16)) 
  } 
 
//生成随机数据。n表示位数  
  var jschars = ['0','1','2','3','4','5','6','7','8','9'];  
  function generateMixed(n) {  
    var res = "";  
    for(var i = 0; i < n ; i ++) {  
      var id = Math.ceil(Math.random()*9);  
      res += jschars[id];  
    }  
    return res;  
  }  
</script> 
 
</body> 
</html>

 方法二,HTML5 Canvas实现
源码:

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <!-- 
  <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
  <link href="favicon.ico" rel="Bookmark" type="image/x-icon" /> 
  --> 
  <meta name="Generator" content="EditPlus®"> 
  <meta name="Author" content=""> 
  <meta name="Keywords" content=""> 
  <meta name="Description" content=""> 
  <title>Canvas弹幕</title> 
  <link href="" rel="stylesheet" /> 
  <style type="text/css"> 
     
    #c1{background:#f1f1f1;} 
    span{color:#FFFFFF;} 
  </style> 
</head> 
<body> 
<canvas id="c1" width="600" height="300" > 
  <span>该浏览器不支持html5</span> 
</canvas> 
<br /> 
<input type="text" name='smsg' value="" id="smsg" placeholder="请输入内容" /> <button id="send">发送</button> 
<!--<button id='start' onclick="startFun('test')">Start</button> 
<button id='stop' onclick="stopFun()">Stop</button>--> 
 
 
 
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript">   
  var sv; 
  var sId; 
  var oC; 
  var oGC;   
  var numW; 
  var numH; 
  var maxTxt = 600; 
   
 
$(function(){ 
$("#send").click(function(){ 
    clearInterval(sId); 
    var m = $("#smsg").val(); 
    //alert(m); 
    startFun(m); 
    $("#smsg").val('') 
  }); 
}) 
  function doDraw(msg){ 
    oC = document.getElementById('c1'); 
    oGC = oC.getContext('2d');   
    numW = oC.width; 
    numH = oC.height; 
    console.log(numW+'-'+numH); 
 
    oGC.fillStyle="red"; 
    //oGC.fillRect(0,0,numW,100); 
    oGC.fillText(msg,numW,100); 
  } 
  function startFun(msg){ 
    doDraw(msg); 
    sId = setInterval(function(){    
      if (numW > -610) 
      { 
        numW--; 
        console.log(numW); 
        oGC.clearRect(0,0,oC.width,oC.height); 
        oGC.fillText(msg,numW,100); 
      } else { 
        oGC.clearRect(0,0,oC.width,oC.height); 
        clearInterval(sId); 
      } 
    },10);  
  } 
  </script> 
</body> 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
jquery动态切换背景图片的简单实现方法
May 14 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
学习RxJS之JavaScript框架Cycle.js
Jun 17 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
JavaScript, select标签元素左右移动功能实现
May 14 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 Javascript
laydate.js日期时间选择插件
Jan 04 #Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
Jan 04 #Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 #Javascript
bootstrap laydate日期组件使用详解
Jan 04 #Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 #Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 #Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 #Javascript
You might like
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
php数组去重的函数代码
2013/02/03 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
javascript eval(func())使用示例
2013/12/05 Javascript
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
Express结合Webpack的全栈自动刷新
2019/05/23 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
Windows下python3.7安装教程
2018/07/31 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
实习期自我鉴定
2013/10/11 职场文书
教师年度考核评语
2014/04/28 职场文书
中秋手机店促销方案
2014/06/16 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS