javascript实现弹幕墙效果
刚开始入门前端，想仿照FreeCodeCamp中的一个项目制作简单的弹幕墙。
步骤如下：
1、编写HTML代码：
创建一个弹幕显示墙，以及两个按钮，分别为“发送”和“清屏”，并在文本框中设置placeholder为“说点什么吧？”以提示用户在此输入弹幕信息。
<body>
<div class="con">
<div id="screen">
<div class="dm_show">
<!-- <div>text message</div> -->
</div>
</div>
<div class="edit">
<p>
<input placeholder="说点什么吧？" class="content" type="text" />
</p>
<p>
<input type="button" class="send" value="发送" />
<input type="button" class="clear" value="清屏" />
</p>
</div>
</div>
</body>
2、设置各标签的CSS样式：
<style>
.con {
background-color: floralwhite;
padding: 40px 80px 80px;
}
#screen {
background-color: #fff;
width: 100%;
height: 380px;
border: 1px solid rgb(229, 229, 229);
font-size: 14px;
}
.content {
border: 1px solid rgb(204, 204, 204);
border-radius: 3px;
width: 320px;
height: 35px;
font-size: 14px;
margin-top: 30px;
}
.send {
border: 1px solid rgb(230, 80, 30);
color: rgb(230, 80, 0);
border-radius: 3px;
text-align: center;
padding: 0;
height: 35px;
line-height: 35px;
font-size: 14px;
width: 159px;
background-color: white;
}
.clear {
border: 1px solid;
color: darkgray;
border-radius: 3px;
text-align: center;
padding: 0;
height: 35px;
line-height: 35px;
font-size: 14px;
width: 159px;
background-color: white;
}
.edit {
margin: 20px;
text-align: center;
}
.text {
position: absolute;
}
*{
margin: 0;
padding: 0;
}
.dm_show{
margin: 30px;
}
</style>
CSS代码完成后效果如下：
完成后的效果如下：
3、编写JavaScript代码，添加按钮点击事件
<script type="text/javascript" src="../jquery-easyui-1.3.5/jquery.min.js"></script>
<script>
$(function() {
//设置“发送”按钮点击事件，将弹幕体显示在弹幕墙上
$('.send').click(function() {
//获取文本输入框的内容
var val = $('.content').val();
//将文本框的内容赋值给val后，将文本框的内容清除，以便用户下一次输入
$('.content').val('');
//将文本框内容用div包裹起来，便于后续处理
var $content = $('<div class="text">' + val + '</div>');
//获取弹幕墙对象
$screen = $(document.getElementById("screen"));
//设置弹幕体出现时的上边距，为任意值
var top = Math.random() * $screen.height()+40;
//设置弹幕体的上边距和左边距
$content.css({
top: top + "px",
left: 80
});
//将弹幕体添加到弹幕墙中
$('.dm_show').append($content);
//弹幕体从左端移动到最右侧，时间为8秒，然后直接删除该元素
$content.animate({
left: $screen.width()+80-$content.width()
}, 8000, function() {
$(this).remove();
});
});
//设置“清屏”点击事件，清除弹幕墙中的所有内容
$('.clear').click(function() {
$('.dm_show').empty();
});
});
</script>
最终效果如下：
至此，一个简易的弹幕墙就完成了，因本人经验有限，所以弹幕墙还比较粗糙，还请各位批评指正。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript直播评论发弹幕切图功能点集合效果代码
一.代码 html+js <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>数发直播平台</title> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="styl
-
基于JavaScript实现弹幕特效
本文实例为大家分享了js实现弹幕特效的具体代码,供大家参考,具体内容如下 此处使用HBuilder编译,最简单的弹幕效果,希望各位前辈不吝指教. 注意用的是jquery-2.0.3.js <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css&
-
利用JS代码自动删除稿件的普通弹幕功能
事情的起因是在b站投稿了一个高级弹幕测试的视频(av9940487),但是由于b站的弹幕池机制是新的弹幕顶掉旧的弹幕,所以导致一些人发的高级弹幕很快就被顶掉了. 所以就想着写个脚本来自动删除属性为普通的弹幕,语言用的是javascript,在chrome的控制台就可以执行这个脚本. 1.删除弹幕的流程分析 判断弹幕A是否为普通弹幕,是则选中. 点击删除弹幕的按钮,弹出二次确认框. 点击确定,成功删除. 2.删除弹幕相关的html代码,js代码2.1 选中 可通过判断class属性为"item-f
-
简单实现JavaScript弹幕效果
不知大家有没有感受到,弹幕又是另一出好戏!! 不过我个人还是比较排斥看电视的时候被出来的弹幕打扰.今天我们来写一个简单的弹幕.简单到什么程度呢?看下效果: 由图可以看出,我们的呆毛html结构确实是非常简单啦. 就是由一个div.一个input框另加一个button组成. <div id="box" class="box"></div> <input type="text" id="txt" /&
-
JS实现的视频弹幕效果示例
本文实例讲述了JS实现的视频弹幕效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>斗鱼
-
javascript实现弹幕墙效果
刚开始入门前端,想仿照FreeCodeCamp中的一个项目制作简单的弹幕墙. 步骤如下: 1.编写HTML代码: 创建一个弹幕显示墙,以及两个按钮,分别为"发送"和"清屏",并在文本框中设置placeholder为"说点什么吧?"以提示用户在此输入弹幕信息. <body> <div class="con"> <div id="screen"> <div class=
-
js实现弹幕墙效果
本文实例为大家分享了js实现弹幕墙效果的具体代码,供大家参考,具体内容如下 1.首先要考虑弹幕墙需要什么:一面墙,输入框,发射按钮,关闭和开启弹幕按钮,在此关闭和开启设置为同一个按钮: 2.其次弹幕上墙以后需要移动,从墙的最右边移动到最左边,当移动到最左边时,这条弹幕就要消失: 3.初步的想法应该就是当在输入框输入你要发送的内容,点击发送按钮,在墙上会新建一个div来包含这条弹幕内容,再给这个div相应的移动动画class: 4.弹幕颜色随机,单条弹幕之间有间隔: 取随机颜色这里用的是 "#&q
-
js实现弹幕飞机效果
本文实例为大家分享了js实现弹幕飞机效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ width: 70vw;/*长宽最好是obj的倍数*/ height: 90vh; border-width:
-
基于javascript实现窗口抖动效果
本文实例讲解了基于javascript实现窗口抖动效果的详细代码,分享给大家供大家参考,具体内容如下 效果图: 鼠标点击,窗口实现抖动. 具体代码: <!DOCTYPE HTML> <html> <head> <meta charset="gb2312"/> <title>窗口登陆效果</title> <style type="text/css"> #win { position:r
-
JavaScript实现开关等效果
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>开关灯</title> <style type="text/css"> html, body { margin: 0px; padding: 0px; width: 100%; height: 100%; cur
-
基于JavaScript实现图片剪切效果
学会如何获取鼠标的坐标位置以及监听鼠标的按下.拖动.松开等动作事件,从而实现拖动鼠标来改变图片大小. 还可以学习css中的clip属性. 一.CSS实现图片不透明及裁剪效果. 图片剪切三层结构 1.第一层opacity,给图层设置透明度 2.第二层clip,clip属性:对图片进行裁剪,实现图像的一部分显示,其他部分进行隐藏 3.第三层选取框absolute(与第二层重叠的),包括八个触点的效果 html代码: <div id="box"> <img src=&quo
-
Javascript实现飞动广告效果的方法
本文实例讲述了Javascript实现飞动广告效果的方法.分享给大家供大家参考.具体实现方法如下: <!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"&g
-
基于JavaScript实现无缝滚动效果
本文实例为大家分享了JavaScript实现无缝滚动效果展示的具体代码,供大家参考,具体内容如下 首先应该区分样式中的绝对定位和相对定位,一般来说,移动的单位为绝对定位,在这个实例中,移动的Ul就是绝对定位 ,否则它根本无法滚动,而它相对于div1滚动 ,则div1就作为他的相对定位. oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;这段代码是实现无缝滚动的核心,使之可以在不论左右滚动的时候都有下一步图片接上去. 在操作或者进行比较的时候,都要用offset取
-
JavaScript实现滚动栏效果的方法
本文实例讲述了JavaScript实现滚动栏效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } #div1 ul{ position: absolute; le
-
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
本文实例讲述了JavaScript实现带缓冲效果的随屏滚动漂浮广告代码.分享给大家供大家参考,具体如下: 这里演示了始终随屏滚动的JavaScript代码,在国内的应用泛滥成灾了,特别是一些喜欢漂浮广告的站长,常把本代码用作了漂浮广告,其实这种效果的初衷是编写一个随屏滚动的菜单,让游客随时随地可以控制网站的导向. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hc-style-scroll-adv-codes/ 具体代码如下: <html