如何使用JQuery和HTML5 Canvas两种方法实现弹幕效果:

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/dengliushuai/article/details/60335526


方法一,JQuery实现
源码:仅供参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!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实现
源码:仅供参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!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' οnclick="startFun('test')">Start</button>
<button id='stop' οnclick="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>
展开阅读全文

没有更多推荐了,返回首页