小说中的弹幕怎么实现的,是JavaScript和css3? 最好有源码发我看看。
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小说中的弹幕怎么实现的,是JavaScript和css3? 最好有源码发我看看。相关的知识,希望对你有一定的参考价值。
小说中的弹幕怎么实现的,是javascript和css3?
最好有源码发我看看。
谈正事
又一枚精彩的弹幕效果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? 最好有源码发我看看。的主要内容,如果未能解决你的问题,请参考以下文章