小说中的弹幕怎么实现的,是JavaScript和css3? 最好有源码发我看看。

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小说中的弹幕怎么实现的,是JavaScript和css3? 最好有源码发我看看。相关的知识,希望对你有一定的参考价值。

小说中的弹幕怎么实现的,是javascript和css3?
最好有源码发我看看。

就是javasceipt弹出一个div,如果已经有div了,则向上移动一个div的height就可以了 参考技术A 下面的图片是啥追问

谈正事

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

精彩的弹幕效果分享给大家,具有一定的参考价值,感兴趣的朋友可以尝试制作弹幕,具体内容如下
 

简易弹幕效果:将发布的内容随机显示在弹幕右侧,逐渐左移最后消失。

技术分享

 

涉及知识点:val()、random()、height()、css()、append()、remove()等,主要是元素的操作

html代码:

1
2
3
4
5
6
7
8
9
<a href="#">弹幕技术</a>
  <div class="mask">
    <a href="#" class="button">X</a>
  </div>
  <!-- 底部发言框前端 -->
  <div class="bottom">
    <input class="content"></input>
    <a href="#" class="send">发表言论</a>
  </div>

css代码:

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
html,body{
    background-image:url("images/208.jpg");
    height:100%;//文字的显示区域要设置好
  }
  div.mask{
    position:fixed;
    width:100%;
    height:100%;
    background-color:black;
    opacity:0.5;
    top:0px;
    left:0px;
  }
  div.bottom{
    width:100%;
    height:77px;
    background-color:#090909;
    position:fixed;
    bottom:0px;
    left:0px;
    text-align:center;
    line-height:77px;
  }
  div.bottom input.content{
    width:605px;
    height:37px;
    border:none;
    border-radius:10px 0px 0px 10px;
    font-size:16px;
    font-family:‘Microsoft Yahei‘;
  }
  div.bottom a.send{
    background-color:green;
    color:#fff;
    display:inline-block;
    width:150px;
    height:40px;
    line-height:37px;
    text-align:center;
    position:relative;
    left:-10px;
    top:-2px;
    border-radius:0px 10px 10px 0px;
    text-decoration:none;
    font-family:‘Microsoft Yahei‘;
  }
  div.mask a.button{
    width:50px;
    height:50px;
    border-radius:30px;
    background-color:#660000;
    color:#fff;
    position:fixed;
    top:20px;
    right:20px;
    text-align:center;
    line-height:50px;
    font-size:30px;
    font-family:‘Microsoft Yahei‘;
    border:1px solid #fff;
    text-decoration:none;
    cursor:pointer;
  }
  div.text{
    color:#fff;
    position:fixed;
    right:0px;
    font-size:20px;
    white-space: nowrap;
  }

jQuery代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(‘a.send‘).click(function(){
      //获取内容,创建新元素,并设置位置追加到目标元素中
      var val=$(‘input.content‘).val();
      var $content=$(‘<div class="text">‘+val+‘</div>‘);
      var top=Math.random()*$(document.body).height()-77;
      $content.css(‘top‘,top);
      $(‘div.mask‘).append($content);
      //移动到最右侧,直接删除该元素
      $content.animate({right:$(document.body).width()+100},8000,function(){
        $(this).remove();
      });
    });
    $(‘div.button‘).click(function(){
      $(‘div.mask‘).hide(2000);
    });

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



以上是关于小说中的弹幕怎么实现的,是JavaScript和css3? 最好有源码发我看看。的主要内容,如果未能解决你的问题,请参考以下文章

请问b站安卓客户端怎么发有颜色的弹幕啊?

请教大神,如图,在腾讯视频上发的带图案的弹幕是怎么设置的,急求

手机端虎牙直播回放怎么还原弹幕

C语言编写发送弹幕神器

电脑弹幕怎么关闭

B站怎么查用户发过的所有弹幕