开发工具与关键技术:Visual Studio 2015 JavaScript
作者:宁佐潮
撰写时间:2019.3.31
在日常追剧中的,许多人都喜欢打开弹幕,因为评论往往才具有灵魂,接下来让我们一起制作一个简单弹幕功能
页面而已和样式十分简洁,不多说,直接上图片
主要部分,input用来输入文字,span标签当作按钮来点击发送弹幕,动画danmuon用来实现弹幕从左至右的滑动
然后便是点击发送弹幕触发的事件
获取到ID,click里一个function,dangmuval是获取到的文字,i是随机的高度,然后cont是将动态添加的弹幕,设置style样式的高度为上面的随机高度,,再加上从左至右的动画效果,内容便是上面获取到用户输入的内容,最后再用append来添加到ul标签的尾部部分,这样便可以实现弹幕的功能了
<body>
<style>
li {list-style: none; }
#dang { height: 40px;text-align: center;padding-top: 650px; }
#dang input { width: 200px;height: 30px; text-align: left;line-height: 30px;padding-left: 5px; }
#fan {width: 80px;height: 35px;text-align: center;line-height: 35px;color: #000;display: inline-block;cursor: pointer;}
.shanpe li { position: absolute;color: #000; height: 30px;line-height: 30px; right: 0px;}
@keyframes danmuone {
100% {
right: 1600px;
}
}
</style>
<div class="content" id="content">
<ul class="shanpe" id="shanpe"></ul>
<form action="/" method="post" id="dang">
<input type="text" name="name" value="¥ㄟ(´・ᴗ・`)ノ$暴富" id="dangmu" />
<span id="fan">发送弹幕</span>
</form>
</div>
<script src="jquery-1.12.4/jquery-1.12.4.js"></script>
<script>
$("#fan").click(function () {
var dangmuval = $("#dangmu").val();
var i = Math.floor(Math.random() * 300);//随机高度
var cont = '<li style="' + 'top: ' + i + 'px;' + 'animation: danmuone 10s 1 forwards linear;' + '">' + dangmuval + '</li>';
$("#shanpe").append(cont);
});
</script>
</body>