jquery实现直播弹幕效果
本文实例为大家分享了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; }