本文实例为大家分享了js实现弹幕效果的具体代码,供大家参考,具体内容如下
效果展示:
源码展示:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>原生js实现弹幕效果</title> <style> * { padding:0; margin:0; } .all { width:600px; height:400px; background:#000000; } /*.danmu {*/ /*width:600px;*/ /*height:500px;*/ /*background:#000000;*/ /*overflow:hidden;*/ /*z-index:50;*/ /*}*/ </style> </head> <body> <div class="all"> </div> <input type="text" class="texts" value="这是一个弹幕。。。"> <button>发送</button> <script> var all = document.querySelector('.all'); var danmu = document.querySelector('.danmu'); var buttons = document.querySelector('button'); var texts = document.querySelector('.texts'); console.log(texts.value); buttons.onclick = function() { var p = document.createElement('p'); p.style.position = 'absolute'; p.innerHTML = texts.value; p.style.left = 600 + 'px'; p.style.color = 'white'; p.style.zIndex = 100; p.style.top = Math.random() * 490 + 'px'; all.appendChild(p); var x = setInterval(function() { p.style.left = parseInt(p.style.left) - 10 + 'px'; if ((parseInt(p.style.left) + 600) <= 0) { all.removeChild(p); clearInterval(x); } }, 100) } </script> <pre style="color:red"> 感: 最近贡献一下我在教学中的小案例 希望能给你一些帮助 ,希望大家继续关注我的博客 --王 </pre> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,弹幕
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“原生js实现弹幕效果”评论...
更新日志
2024年05月29日
2024年05月29日
- 鸣潮安可角色培养材料大全 安可突破材料清单汇总
- 《我推的孩子》第2季全新PV公开!今年7月3日开播
- 外媒:下一代Xbox与前代截然不同 或能运行Steam
- 曝索尼正在开发新动作冒险游戏:以突厥神话为主题
- 黄莺莺【黄莺莺精选1-2】2CD[WAV+CUE]
- 群星《寂寞の诱惑HQ》wav分轨
- 群星《测耳聆听》[LPCD]3CD[WAV]
- 鸣潮桃祈角色培养材料大全 桃祈突破材料清单汇总
- 鸣潮卡卡罗角色培养材料大全 卡卡罗突破材料清单汇总
- 鸣潮维里奈角色培养材料大全 维里奈突破材料清单汇总
- 群星《红歌汇》HQ黑胶2CD[WAV分轨]
- 发烧名盘《超级名作3·寂静仙境HQ》2CD[DTS-WAV]
- 【古典天碟】(XRCD24)桑多尔·韦格《莫扎特-小夜曲、嬉游曲》1987[WAV/分轨]
- 请愿发起人庆祝《剑星》取消服装审查:玩家的胜利!
- 身陷桃色丑闻!70岁声优古谷彻承认出轨致其节目关停