本文实例为大家分享了jquery弹幕效果,供大家参考,具体内容如下
页面效果如下:
html页面如下:
<hr/> <div class="row"> <div class="col-md-6"> <form class="form-horizontal"> <div style="display: none"> <div class="form-group"> <label class="col-sm-2 control-label" ><a href="https://www.jb51.cc/tag/wenzi/" target="_blank" class="keywords">文字</a></label> <div class="col-sm-6"> <input class="form-control" name="info" type="text" placeholder="弹幕<a href="https://www.jb51.cc/tag/wenzi/" target="_blank" class="keywords">文字</a>信息"/> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" ><a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a></label> <div class="col-sm-6"> <input class="form-control" name="href" type="text" placeholder="http://www.yaseng.org"/> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" >延迟</label> <div class="col-sm-2"> <input class="form-control" name="speed" type="text" placeholder="6" value="6" /> </div> <label class="col-sm-2 control-label" ><a href="https://www.jb51.cc/tag/guanbi/" target="_blank" class="keywords">关闭</a>按钮</label> <div class="col-sm-2"> <input class="form-control" name="close" type="checkbox" checked > </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" >高度</label> <div class="col-sm-4"> <label class="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>-inline"> <input type="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>" name="bottomra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>" value="0" checked="checked"> <a href="https://www.jb51.cc/tag/suiji/" target="_blank" class="keywords">随机</a> </label> <label class="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>-inline"> <input type="radio" name="bottomradio" value="1" > 设置 </label> </div> <div class="col-sm-2"> <input class="form-control" name="bottom" type="text" placeholder="70" value="70" /> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" ><a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a></label> <div class="col-sm-6"> <label class="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>-inline"> <input type="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>" name="img" value="cute.png" checked=""> cute.png </label> <label class="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>-inline"> <input type="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>" name="img" value="haha.gif"> haha.gif </label> <label class="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>-inline"> <input type="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>" name="img" value="none"> 无图 </label> </div> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label" ></label> <div class="col-sm-3"> <input type="button" class="btn btn-primary bb-light-blue" onclick=" run() " value="运行"> </div> <div class="col-sm-3"> <button class="btn btn-warning " onclick=" clear_barrage() "> 清除</button> </div> </div> </form> </div> <div class="col-md-6" style="display: none"> <textarea class="form-control" id="barrager-code" rows="14" ></textarea> </div> </div>