终于实现了!精彩的jquery弹幕效果

时间：2021-05-18

本文实例为大家分享了jquery弹幕效果，供大家参考，具体内容如下

页面效果如下:

html页面如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://','info':'这是一条很长很长的字幕','close':false}; $('#barrager-code').val(barrager_code.format(default_item)); $('body').barrager(item); }); function run() { var shi = [ "朱砂", "天下", "杀伐", "人家", "韶华", "风华", "繁华", "血染", " 墨染 ", "白衣", " 素衣", " 嫁衣 ", "倾城 ", "孤城 ", "空城 ", "旧城", "旧人 ", "伊人 ", "心疼 ", "春风", " 古琴 ", "无情 ", "迷离 ", "奈何", " 断弦", " 焚尽 ", "散乱", " 陌路 ", "乱世 ", "笑靥 ", "浅笑", " 明眸", " 轻叹", " 烟火", "一生 " + "三生", " 浮生 ", "桃花 ", "梨花", " 落花", " 烟花", " 离殇", " 情殇", " 爱殇 ", "剑殇", " 灼伤", " 仓皇 ", "匆忙", " 陌上", " 清商", "焚香 ", "墨香 ", "微凉 " + "断肠", " 痴狂 ", "凄凉", " 黄梁", " 未央", " 成双", " 无恙", " 虚妄", " 凝霜", " 洛阳", " 长安", " 江南", " 忘川", " 千年", " 纸伞 ", "烟雨", " 回眸 ", "公子" + "红尘", " 红颜 ", "红衣", " 红豆 ", "红线 ", "青丝 ", "青史", " 青冢", " 白发", " 白首", " 白骨 ", "黄土", " 黄泉 ", "碧落", " 紫陌情深缘浅", " 情深不寿 ", "莫失莫忘" + " 阴阳相隔 ", "如花美眷", " 似水流年", " 眉目如画", " 曲终人散", " 繁华落尽 ", "不诉离殇 ", "一世长安" ]; var info = shi[Math.floor(Math.random() * shi.length)]; //$('input[name=info]').val(); (info == '') ? info = '请填写弹幕文字' : info = info; var href = $('input[name=href]').val(); var speed = parseInt($('input[name=speed]').val()); var bottom = parseInt($('input[name=bottom]').val()); var code = barrager_code; if ($('input:radio[name=bottomradio]:checked').val() == 0) { var window_height = $(window).height() - 150; bottom = Math.floor(Math.random() * window_height + 40); code = code.replace(" bottom:{bottom}, //距离底部高度,单位px,默认随机 \n", ''); } var img = $('input:radio[name=img]:checked').val(); if (img == 'none') { code = code.replace(" img:'{img}', //图片 \n", ''); } var item = { 'img': 'static/img/' + img, 'info': info, 'href': href, 'close': true, 'speed': speed, 'bottom': bottom, 'color': getRandomColor(), 'old_ie_color': getRandomColor() }; if (!$('input[name=close]').is(':checked')) { item.close = false; } code = code.format(item); $('#barrager-code').val(code); try { eval(code); } catch (e) { alert(e.message); } return false; } function clear_barrage() { $.fn.barrager.removeAll(); } function getRandomColor() { return "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6); } function run_example() { var wenzi = ["Hello", "网上", "x战警", "蜘蛛侠", "死侍"]; var example_item = { 'img': 'static/img/heisenberg.png', 'info': wenzi[Math.floor(Math.random() * wenzi.length)] }; $('body').barrager(example_item); return false; } </script></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章