javascript实现视频弹幕效果（两个版本）

时间：2021-05-26

本文实例为大家分享了javascript实现视频弹幕效果的具体代码，供大家参考，具体内容如下

基础版本

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } .dm { width: 800px; height: 600px; background-color: blue; margin: 0 auto; } .box { height: 500px; background-color: #000; position: relative; overflow: hidden; } video { width: 100%; height: 100%; } .info { text-align: center; margin-top: 20px; } input[type=text] { width: 500px; height: 50px; } input[type=button] { height: 50px; width: 100px; } span { position: absolute; white-space: nowrap; font: bold 18px '微软雅黑'; } </style></head><body> <div class="dm"> <div class="box"> <video src="m.mp4" controls></video> </div> <div class="info"> <input type="text" maxlength="30" id="txt"> <input type="button" value="发射" id="emit"> </div> </div> <script src="jquery-1.12.4.js"></script> <script> // 0. 用一个数组保存一组颜色值 var colors = ['red', 'green', 'yellow', '#fff', 'pink', 'blue']; // 1. 给发射按钮注册点击事件 $('#emit').click(function () { // 2. 获取文本框的内容 var v = $('#txt').val(); // 3. 创建span标签，并设置内容，设置样式，最后追加到类名为box的div中 var $span = $('<span></span>'); $span.text(v) .css({ left: $('.box').width(), top: parseInt(Math.random() * $('.box').height()), color: colors[parseInt(Math.random() * colors.length)] }).appendTo('.box'); // 4. 让当前的span产生动画 left 为-span的宽度 $span.animate({ left: -1 * $span.width() }, 6000, 'linear', function () { // 当动画结束后，删除该元素 $span.remove(); }) }); </script></body></html>

加强版本

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } .dm { width: 800px; height: 600px; background-color: blue; margin: 0 auto; } .box { height: 500px; background-color: #000; position: relative; overflow: hidden; } video { width: 100%; height: 100%; } .info { text-align: center; margin-top: 20px; } input[type=text] { width: 500px; height: 50px; } input[type=button] { height: 50px; width: 100px; } span { position: absolute; white-space: nowrap; font: bold 18px '微软雅黑'; } </style></head><body> <div class="dm"> <div class="box"> <!-- controls 如果出现该属性，则向用户显示控件，比如播放按钮。 --> <video src="m.mp4" controls></video> </div> <div class="info"> <input type="radio" value="" id="ban" name="1">精简</input> <input type="radio" value="" id="vip" name="1">VIP尊享</input> <input type="text" maxlength="30" id="txt"> <input type="button" value="发射" id="emit"> </div> </div> <script src="jquery-1.12.4.js"></script> <script> // 0. 用一个数组保存一组颜色值 var colors = ['red', 'green', 'yellow', '#fff', 'pink', 'blue']; //定义一个变量，定义其他样式的 b = 0 $('#ban').click(function () { b = 1; }); $('#vip').click(function () { b = 2; }); // 1. 给发射按钮注册点击事件 $('#emit').click(function () { // 2. 获取文本框的内容 var v = $('#txt').val(); // 3. 创建span标签，并设置内容，设置样式，最后追加到类名为box的div中 var $span = $('<span></span>'); //定义CSS样式，让它是一个数组形式表现 css = [{ "left": $('.box').width(), "top": parseInt(Math.random() * $('.box').height()), "color": colors[parseInt(Math.random() * colors.length)] }, { "left": $('.box').width(), "top": parseInt(Math.random() * ($('.box').height() / 2)), "color": colors[parseInt(Math.random() * colors.length)] }, { "left": $('.box').width(), "top": parseInt(Math.random() * $('.box').height()), "color": "yellow", "fontSize": 50, "fontFamily": "楷体" } ] //看看能不能打印出数组中的东西 // console.log(abc[1]) $span.text(v) .css(css[b]) .appendTo('.box'); // 4. 让当前的span产生动画 left 为-span的宽度 //打印出文本长度 // console.log(v.length) $span.animate({ left: -1 * $span.width() }, (30 - v.length) * 333, 'linear', function () { // 当动画结束后，删除该元素 $span.remove(); }) }); </script></body></html>

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

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

相关文章