jQuery实现弹幕特效
案例简介
jQuery实现弹幕效果，代码如下。
案例目录
HTML部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery弹幕案例</title> <link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" /> </head> <body> <div class="box"> <div class="top"></div> <div class="bot"> <input type="text" id="txt" placeholder="我来说两句。。。" /> <button type="button" id="btn">发送</button> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $(function() { var colors = ["red", "green", "hotpink", "pink", "cyan", "yellowgreen", "purple", "deepskyblue"]; $("#btn").on("click", function() { var randomColor = parseInt(Math.random() * colors.length); var randomY = parseInt(Math.random() * 400); $("<span></span>") //创建span .text($("#txt").val()) //设置内容 .css("color", colors[randomColor]) //设置字体颜色 .css("left", "1400px") //设置left值 .css("top", randomY) //设置top值 .animate({ left: -500 }, 10000, "linear", function() { //到了终点，需要删除 $(this).remove(); }) //添加动画 .appendTo(".top"); $("#txt").val(""); }); }); </script> </body> </html>
CSS部分
* {
margin: 0;
padding: 0;
}
.box {
width: 1600px;
height: 757px;
}
.top {
width: 100%;
height: 660px;
position: relative;
}
.bot {
width: 100%;
height: 97px;
background-color: #666666;
position: relative;
}
#txt {
width: 300px;
height: 30px;
border-radius: 5px;
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -15px;
border: none;
}
#btn {
width: 60px;
height: 30px;
color: white;
background-color: red;
position: absolute;
left: 955px;
top: 34px;
border: none;
}
span {
position: absolute;
color: #000;
font-size: 50px;
line-height: 1.5em;
cursor: pointer;
white-space: nowrap;
}
效果展示
以上就是jQuery实现弹幕效果的代码，希望对您有帮助！
源码下载：jQuery弹幕
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍jQuery实现弹幕效果，包括了jQuery实现弹幕效果的使用技巧和注意事项，需要的朋友参考一下 效果如下： 代码如下： 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！
-
本文向大家介绍基于jQuery实现弹幕APP，包括了基于jQuery实现弹幕APP的使用技巧和注意事项，需要的朋友参考一下 今天闲着无聊，写了个弹幕APP，主要实现以下几个功能： 1.点击“弹幕发射”或回车可以输出弹幕到弹幕墙上。 2.弹幕的运行轨迹是从弹幕墙的最右边到最左边，Y轴的数值在弹幕墙的高度内随机，颜色HEX随机，速度随机。 3.右侧的表格可以储存弹幕内容以及弹幕的发射时间，越靠近现在的
-
本文向大家介绍基于jquery实现弹幕效果，包括了基于jquery实现弹幕效果的使用技巧和注意事项，需要的朋友参考一下 用jquery写的一个弹幕，供大家参考，具体内容如下 效果图： 源码： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍简单实现jQuery弹幕效果，包括了简单实现jQuery弹幕效果的使用技巧和注意事项，需要的朋友参考一下 在要写一个弹幕案例的时候，首先要清楚每一步要干什么。 首先搭好框架之后在要发送弹幕时应该准备进行如下步骤： 获取到要发送到弹幕上的内容，即获取到文本框输入的内容。通过jquery的var str = $(“#文本框的id”).val(); 生成一个元素：利用jQuery的 var
-
本文向大家介绍jQuery实现简单弹幕效果，包括了jQuery实现简单弹幕效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jQuery实现弹幕效果的具体代码，供大家参考，具体内容如下 话不多说吧，直接看效果吧： 主要思路 其实弹幕的主要思路很简单，就是将div从右向左移动，直到完全移除屏幕之后，将当前div从body中移除，这里我采用了面向对象的思想来处理，具体js代码如下： J
-
本文向大家介绍jquery实现直播弹幕效果，包括了jquery实现直播弹幕效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jquery直播弹幕展示的具体代码，供大家参考，具体内容如下 理论知识： 实现效果主要涉及jq对节点的操作，以及动画函数的使用… 思路： 1.获取到评论文本框的值，对文本内容进行处理 2.动态创建一条弹幕，将创建的弹幕动态的添加到需要显示的页面，并同时创建一条