程序员开发实例大全宝库

网站首页 > 编程文章 正文

小猿圈解析用jQuery实现弹幕评论效果

zazugpt 2024-09-10 23:36:39 编程文章 19 ℃ 0 评论

大家对B站不陌生吧，特别是他的弹幕系统是很多网站都在模仿的，但是你知道他是怎么制作的吗？今天小猿圈web前端讲师就用jQuery实现弹幕评论效果，希望对你有所启发。

首先第一步：布局

CSS部分

<style>

*{padding: 0;margin: 0;

font-family: "微软雅黑";

font-size: 16px;

}

html,body{

width:100%;

height: 100%;

}

.box{

width: 100%;

height: 100%;

overflow: hidden;

position: relative;

}

#bottom {

width: 100%;

height: 100px;

background-color: #666;

position:fixed;

bottom:0px;

}

.content {

width: 430px;

height: 40px;

margin: 30px auto;

}

.title {

font-size: 22px;

color: #fff;

vertical-align: bottom;

display: inline;

}

#text {

width:300px;

height: 30px;

border: none;

border-radius: 5px;

}

#btn1 {

width: 60px;

height: 30px;

border: none;

margin-left: 2px;

background-color: red;

color: #fff;

}

span {

position: absolute;

font-size: 30px;

line-height: 30px;

white-space: nowrap;

}

</style>

下面是HTML部分

<body>

<div id="box" class="box">

<div id="bottom">

<div class="content">

<p class="title">吐槽：</p><input type="text" id="text"><button id="btn1">发射</button>

</div>

</div>

</div>

</body>

注意span别忘了加定位，否则无法做动画

jQuery代码实现

<script src="jquery-1.12.4.js"></script>

<script>

$(function(){

var colors=["red","green","blue","pink","purple","cyan","hotpink","#000"]

$("#btn1").click(function(){

var randomColors=parseInt(Math.random()*colors.length);

var randomY=Math.random()*400;

//console.log(randomY);

$("<span></span>")

.text($("#text").val())

.css("color",colors[randomColors])

.css("left",$(window).width())

.css("top",randomY)

.animate({left:-500},10000,"linear",function(){

$(this).remove();

})

.appendTo("#box");

$("#text").val("");

})

$("#text").keyup(function(e) {

if (e.keyCode==13) {

$("#btn1").click();

}

})

})

</script>

代码看起来很简单主要有随机颜色、随机位置的弹幕效果。新建span设置出现的X坐标和Y坐标，动画的效果和持续时间。以及发送完弹幕之后，输入框清空和给输入框绑定事件，按回车键也能发送弹幕。

需要注意的是弹幕动画的回调函数，动画执行结束后，一定要让这个span自我删除。

以上就是小猿圈web前端讲师对于jQuery实现弹幕评论效果的简单介绍，相信你也看会了很多吧，那就赶快行动去练习一下吧，记住学习前端不仅需要看文档看视频，还要的就是多多的练习，这样才能记的牢固，视频可以到小猿圈去观看的，里面有最全最新的视频。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表