jQuery实现弹幕效果

效果如下：

代码如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 *{
 margin:0;
 padding:0;
 }
 #wrap{
 width:800px;
 height:550px;
 background:#E9E8E8;
 margin:0 auto;
 position:relative;
 }
 #content{
 width:750px;
 height:400px;
 background:#fff;
 margin:0 auto;
 border-radius: 15px;
 position:relative;
 overflow:hidden;
 }
 input:nth-of-type(1){
 width:250px;
 height:30px;
 margin:20px 0 0 200px;
 }
 input:nth-of-type(2){
 width:60px;
 height:33px;
 }
 .p{
 height:30px;
 line-height:30px;
 position:absolute;
 top:0;
 left:770px;
 font-weight:900;
 font-size: 30px;
 }
 </style>
 </head>
 <body>
 <div id="wrap">
 <div id="content">
 </div>
 <input type="text" id="txt" placeholder="一起来吐槽吧~"/>
 <input type="button" value="发送" id="btn" />
 </div>
 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
 <script>
 $(function(){
 $("#btn").click(function(){
  var $value=$("#txt").val();
  var $p=$("<p></p>");
  $p.addClass("p");
  $p.text($value);
  $("#txt").val("");//点击过后设置文本框内容为空
  var _top=Math.floor(Math.random()*($("#content").innerHeight()-30));
  var _fontsize=16+Math.floor(Math.random()*10);
  var _rgb="rgb(" + Math.floor(Math.random()*255)+"," + Math.floor(Math.random()*255)+"," + Math.floor(Math.random()*255)+")";
  $p.css({"top":_top,"font-size":_fontsize,"color":_rgb});
  $("#content").append($p);
  var _timer=Math.ceil(Math.random()*4000)+3000;
  $p.stop().animate({"left":"-500px"},_timer,function(){
  $(this).remove();
  });
 });
 })
 </script>
 </body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • 简单实现jQuery弹幕效果

    简单实现jQuery弹幕效果

    在要写一个弹幕案例的时候,首先要清楚每一步要干什么. 首先搭好框架之后在要发送弹幕时应该准备进行如下步骤: 获取到要发送到弹幕上的内容,即获取到文本框输入的内容.通过jquery的var str = $("#文本框的id").val(); 生成一个元素:利用jQuery的 var createSpan =$("")生成一个span元素,以便发送. 给刚创建的span赋值,即获取到的文本框中的值 createSpan.text(str ); 设置元素的动画效果,是元素

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

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

    本文实例为大家分享了jquery弹幕效果,供大家参考,具体内容如下 页面效果如下: html页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • jQuery实现的弹幕效果完整实例

    jQuery实现的弹幕效果完整实例

    本文实例讲述了jQuery实现的弹幕效果.分享给大家供大家参考,具体如下: 看视频的时候老是会出现一些弹幕,对于这个看着很高大上的特效,其实也不难实现. 先来看看运行效果: 下面将整个代码显示出来: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net弹幕</title> <st

  • 基于jQuery实现弹幕APP

    基于jQuery实现弹幕APP

    今天闲着无聊,写了个弹幕APP,主要实现以下几个功能: 1.点击"弹幕发射"或回车可以输出弹幕到弹幕墙上. 2.弹幕的运行轨迹是从弹幕墙的最右边到最左边,Y轴的数值在弹幕墙的高度内随机,颜色HEX随机,速度随机. 3.右侧的表格可以储存弹幕内容以及弹幕的发射时间,越靠近现在的越靠前. 4.点击"清除弹幕"可以把弹幕墙内的所有弹幕清除掉,但不会影响到表格中的数据. 5.如果弹幕长度过长(我设置的是6个字符),则超过规定长度之外的弹幕内容都会由"...&quo

  • JQuery和HTML5 Canvas实现弹幕效果

    JQuery和HTML5 Canvas实现弹幕效果

    JQuery和HTML5 Canvas两种方法实现弹幕效果: 方法一,JQuery实现. 源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont

  • 又一枚精彩的弹幕效果jQuery实现

    又一枚精彩的弹幕效果jQuery实现

    简易弹幕效果:将发布的内容随机显示在弹幕右侧,逐渐左移最后消失. 涉及知识点:val().random().height().css().append().remove()等,主要是元素的操作 html代码: <a href="#">弹幕技术</a> <div class="mask"> <a href="#" class="button">X</a> </di

  • 基于jquery实现弹幕效果

    基于jquery实现弹幕效果

    用js写的一个弹幕 效果图: 源码: <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"&

  • jQuery实现弹幕效果案例

    jQuery实现弹幕效果案例

    本文实例为大家分享了jQuery实现弹幕效果的具体代码,供大家参考,具体内容如下 效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie

  • jQuery实现弹幕效果

    jQuery实现弹幕效果

    效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } #wrap{ width:800px; height:550px; background:#E9E8E8; margin:0 auto; position:relative;

  • jQuery实现简单弹幕效果

    jQuery实现简单弹幕效果

    本文实例为大家分享了jQuery实现弹幕效果的具体代码,供大家参考,具体内容如下 话不多说吧,直接看效果吧: 主要思路 其实弹幕的主要思路很简单,就是将div从右向左移动,直到完全移除屏幕之后,将当前div从body中移除,这里我采用了面向对象的思想来处理,具体js代码如下: JS /** * 弹幕 */ $(function () { function BarrageManager (options) { this.opts = { url : './res/danmu.json', load

  • jQuery实现弹幕特效

    jQuery实现弹幕特效

    案例简介 jQuery实现弹幕效果,代码如下. 案例目录 HTML部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery弹幕案例</title> <link rel="stylesheet" type="text/css" href="style.css" rel=&

  • jQuery实现的页面弹幕效果【测试可用】

    jQuery实现的页面弹幕效果【测试可用】

    本文实例讲述了jQuery实现的页面弹幕效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht

随机推荐