好资源导航 » 文章资讯 » jquery实现直播弹幕效果

jquery实现直播弹幕效果

2023-08-05 07:10:04 83

本文实例为大家分享了jquery直播弹幕展示的具体代码，供大家参考，具体内容如下

理论知识：

实现效果主要涉及jq对节点的操作，以及动画函数的使用…

思路：

1.获取到评论文本框的值，对文本内容进行处理

2.动态创建一条弹幕，将创建的弹幕动态的添加到需要显示的页面，并同时创建一条新的评论消息，动态添加到评论列表

3.利用数组将每次添加的弹幕保存起来，使用定时器让所有的弹幕循环动态的展示出来

大体上的思路就是这样，下面直接贴代码？







html,body{
margin:0px;
padding:0px;
width:100%;
height:100%;
font-family:"微软雅黑";
font-size:62.5%;
}

.boxDom{
width:100%;
height:100%;
position:relative;
overflow:hidden;
}

.idDom{
width:100%;
height:10%;
background:#666;
position:fixed;
bottom:0px;
}

.content{
display:inline-block;
width:460px;
height:40px;
position:absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
margin:auto;
}

.title{
display:inline;
font-size:4em;
vertical-align:bottom;
color:#fff;
}

.text{
border:none;
width:300px;
height:30px;
border-radius:5px;
font-size:2.4em;
}

.btn{
width:60px;
height:30px;
background:#f90000;
border:none;
color:#fff;
font-size:2.4em;
}

span{
height:40px;
position:absolute;
overflow:hidden;
color:#000;
font-size:4em;
line-height:1.5em;
cursor:pointer;
white-space:nowrap;
}
#boxDomvideo{
width:80%;
height:90%;
float:left;
}
#boxDom.list-info{
width:20%;
height:90%;
float:left;
background-color:#666;
overflow-y:auto;
overflow-x:hidden;
position:relative;
z-index:999;
}
.list-infop{
font-size:15px;
line-height:20px;
border-bottom:1pxdashed#ccc;
text-indent:2em;
color:#fff;
}

吐槽:

发射

最后看看最终的效果图，模仿直播弹幕完成了

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

jquery实现直播弹幕效果

热门推荐

随机推荐