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 相关文章推荐
一实用的实现table排序的Javascript类库
Sep 12 Javascript
Jquery中增加参数与Json转换代码
Nov 20 Javascript
location.href语句与火狐不兼容的问题
Jul 04 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
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 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
2017/03/23 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
python空元组在all中返回结果详解
2020/12/15 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
公司周年庆典邀请函
2014/01/12 职场文书
投资协议书范本
2014/04/21 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
了解Redis常见应用场景
2021/06/23 Redis
Redis集群的关闭与重启操作
2021/07/07 Redis
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server