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 相关文章推荐
HTML中的setCapture和releaseCapture使用介绍
Mar 21 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 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
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
Bootstrap开发实战之响应式轮播图
2016/06/02 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
vue axios重复点击取消上一次请求封装的方法
2019/06/19 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
Python实现针对中文排序的方法
2017/05/09 Python
python机器学习之贝叶斯分类
2018/03/26 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
jupyter实现重新加载模块
2020/04/16 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
宪法宣传周工作方案
2014/05/26 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
创建文明城市倡议书
2015/04/28 职场文书
运动会跳远广播稿
2015/08/19 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书