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> 

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

(0)

相关推荐

  • 基于jQuery实现弹幕APP

    今天闲着无聊,写了个弹幕APP,主要实现以下几个功能: 1.点击"弹幕发射"或回车可以输出弹幕到弹幕墙上. 2.弹幕的运行轨迹是从弹幕墙的最右边到最左边,Y轴的数值在弹幕墙的高度内随机,颜色HEX随机,速度随机. 3.右侧的表格可以储存弹幕内容以及弹幕的发射时间,越靠近现在的越靠前. 4.点击"清除弹幕"可以把弹幕墙内的所有弹幕清除掉,但不会影响到表格中的数据. 5.如果弹幕长度过长(我设置的是6个字符),则超过规定长度之外的弹幕内容都会由"...&quo

  • 又一枚精彩的弹幕效果jQuery实现

    简易弹幕效果:将发布的内容随机显示在弹幕右侧,逐渐左移最后消失. 涉及知识点:val().random().height().css().append().remove()等,主要是元素的操作 html代码: <a href="#">弹幕技术</a> <div class="mask"> <a href="#" class="button">X</a> </di

  • 终于实现了!精彩的jquery弹幕效果

    本文实例为大家分享了jquery弹幕效果,供大家参考,具体内容如下 页面效果如下: html页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • jQuery实现的弹幕效果完整实例

    本文实例讲述了jQuery实现的弹幕效果.分享给大家供大家参考,具体如下: 看视频的时候老是会出现一些弹幕,对于这个看着很高大上的特效,其实也不难实现. 先来看看运行效果: 下面将整个代码显示出来: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net弹幕</title> <st

  • jQuery实现弹幕效果

    效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } #wrap{ width:800px; height:550px; background:#E9E8E8; margin:0 auto; position:relative;

  • 简单实现jQuery弹幕效果

    在要写一个弹幕案例的时候,首先要清楚每一步要干什么. 首先搭好框架之后在要发送弹幕时应该准备进行如下步骤: 获取到要发送到弹幕上的内容,即获取到文本框输入的内容.通过jquery的var str = $("#文本框的id").val(); 生成一个元素:利用jQuery的 var createSpan =$("")生成一个span元素,以便发送. 给刚创建的span赋值,即获取到的文本框中的值 createSpan.text(str ); 设置元素的动画效果,是元素

  • 基于jquery实现弹幕效果

    用js写的一个弹幕 效果图: 源码: <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"&

  • 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" cont

  • 手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效

    HTML5 Canvas的幸运大奖盘特效 现在好的微信微商或者微信公众号都有这种大转盘的项目,这里就整理一个,可以参考下. 这是一款基于jquery和HTML5 Canvas的幸运大奖盘特效.该幸运大奖品特效支持移动端,它通过动态构造Canvas元素来生成大奖盘,并通过jquery代码来随机获取奖品. 使用方法 HTML结构 抽奖用的大转盘使用图片来制作,开始时它们被隐藏.整个抽奖大奖盘放置在一个容器中,控制容器的大小即可以控制奖盘的大小. XML/HTML代码 <div class="c

  • JavaScript html5 canvas绘制时钟效果

    本文实例讲述了JavaScript+html5 canvas绘制时钟效果.分享给大家供大家参考,具体如下: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0

  • JavaScript+HTML5 canvas实现放大镜效果完整示例

    本文实例讲述了JavaScript+HTML5 canvas实现放大镜效果.分享给大家供大家参考,具体如下: 效果: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net canvas放大镜</title> <style> #copycanvas { border: 1px

  • JavaScript html5 canvas绘制时钟效果(二)

    对于H5来说,canvas可以说是它最有特色的一个地方了,有了它之后我们可以随意的在网页上画各种各样的图形,做一些小游戏啊什么的.canvas这个标签的用法,在网上也有特别多的教程了,这里就不作介绍了.今天我们就用canvas来做一个小小的时钟.完整的代码在这里https://github.com/wwervin72/HTML5-Clock. 那么首先在这个页面里面我使用了两个canvas,一个用来绘制静态的时钟表盘和刻度,另一个用来绘制时钟的三个指针,然后用定位让他们重合到一起.然后这里没什么

  • JavaScript+html5 canvas制作的百花齐放效果完整实例

    本文实例讲述了JavaScript+html5 canvas制作的百花齐放效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { border:5px solid gra

  • JavaScript+html5 canvas制作色彩斑斓的正方形效果

    本文实例讲述了JavaScript+html5 canvas制作色彩斑斓的正方形效果.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>canvas中的透明度</t

  • JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例

    本文实例讲述了JavaScript+html5 canvas绘制缤纷多彩的三角形效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { width:500px; heig

  • JavaScript+html5 canvas绘制的小人效果

    本文实例讲述了JavaScript+html5 canvas绘制的小人效果.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>canvas中的缩放</tit

  • JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例

    本文实例讲述了JavaScript+html5 canvas绘制的圆弧荡秋千效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { margin:50px; border:5px solid gray; box-shadow:0p

随机推荐