js是怎么实现弹幕效果,下面让小编来介绍下。效果的具体步骤如下:
1、编写HTML代码:
创建一个弹幕显示墙,以及两个按钮,分别为“发送”和“清屏”,并在文本框中设置placeholder为“说点什么吧?”以提示用户在此输入弹幕信息。
| <body>
id=”screen“>
dm_show”>
–>
text message |
2、设置各标签的CSS样式:
3、编写JavaScript代码,添加按钮点击事件
|
$(function() { //设置“发送”按钮点击事件,将弹幕体显示在弹幕墙上 $(‘.send').click(function() { //获取文本输入框的内容 var val = $(‘.content').val(); //将文本框的内容赋值给val后,将文本框的内容清除,以便用户下一次输入 $(‘.content').val(”); //将文本框内容用div包裹起来,便于后续处理 var $content = $(‘ ' + val + ‘ ');
//获取弹幕墙对象 $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(); }); }); |
以上就是js如何实现弹幕效果的详细内容,更多请关注网站其它相关文章!

#2022 年黑色星期五/网络星期一优惠促销#Namesilo: 域名新注册和转入优惠,.COM域名 首年9.85美元
#黑五限时优惠#OVHcloud:高防独立服务器月付18.99美元起,高防VPS月付4.14美元起,公有云赠送200美元券,免费使用30天
HostPapa:黑色星期五和网络星期一特价,WordPress主机/外贸主机 月付低至$0.95起
HostPapa:2022黑五优惠,入手外贸主机最佳时机,月付低至$0.95
(1054) Unknown column 'conuintoken' in 'field list'