本文实例为大家分享了js实现弹幕特效的具体代码,供大家参考,具体内容如下
此处使用HBuilder编译,最简单的弹幕效果,希望各位前辈不吝指教。
注意用的是jquery-2.0.3.js
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> *{ padding: 0; margin: 0; } .shooter{ width: 600px; height: 60px; /*background: black;*/ margin: 0 auto; } .shooter input{ width: 300px; height: 40px; border: none; border-radius: 7px; box-shadow: 0 0 8px rgba(182,195,214,0.6)inset; padding-left: 15px; margin-top: 10px; } .shooter button{ width: 80px; height: 40px; border: none; margin-left: 10px; background-color:#339B53; border-radius:8px; color: white; cursor: pointer; } .shooter button:hover{ font-size: 14px; background:#008000; } .content{ width: 100%; height: 600px; background: gray; position: relative; overflow: hidden; } .bullet{ position: absolute; /*right: 0;*/ /*left:1600px;*/ word-break: keep-all; /*不让单词折行*/ } </style> <body> <div class="shooter"> <input type="text"/> <button>发射</button> </div> <div class="content"> </div> <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-2.0.3.js">下面是展示的弹幕效果(显示的白线在谷歌浏览器中是看不出来的,在录制时会看出来,此处又一bug):
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。