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 相关文章推荐
javascript web页面刷新的方法收集
Jul 02 Javascript
js 图片等比例缩放代码
May 13 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
深入浅析AngularJs模版与v-bind
Jul 06 Javascript
Vue动态组件和异步组件原理详解
May 06 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
解析dedecms空间迁移步骤详解
2013/05/15 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
Python文件操作函数用法实例详解
2019/12/24 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
用Python实现职工信息管理系统
2020/12/30 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
Java程序员面试题
2016/09/27 面试题
竞选班干部演讲稿600字
2014/08/20 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
赔偿协议书
2015/01/27 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
思想品德课教学反思
2016/02/24 职场文书
导游词之日月潭
2019/11/05 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python