弹幕效果

<!doctype html>

<html>

<head>

  <meta charset="utf-8">

  <title></title>

  <style type="text/css">

    html,

    body {

      margin: 0px;

      padding: 0px;

      width: 100%;

      height: 100%;

      font-family: "微软雅黑";

      font-size: 62.5%;

    }

    .boxDom {

      width: 100%;

      height: 100%;

      position: relative;

      overflow: hidden;

    }

    .idDom {

      width: 100%;

      height: 50px;

      background: #666;

      position: fixed;

      bottom: 0px;

    }

    .content {

      display: inline-block;

      width: 430px;

      height: 40px;

      position: absolute;

      left: 0px;

      right: 0px;

      top: 0px;

      bottom: 0px;

      margin: auto;

    }

    .title {

      display: inline;

      font-size: 4em;

      vertical-align: bottom;

      color: #fff;

    }

    .text {

      border: none;

      width: 300px;

      height: 30px;

      border-radius: 5px;

      font-size: 2.4em;

    }

    .btn {

      width: 60px;

      height: 30px;

      background: #f90000;

      border: none;

      color: #fff;

      font-size: 2.4em;

    }

    span {

      width: 300px;

      height: 40px;

      position: absolute;

      overflow: hidden;

      color: #000;

      font-size: 4em;

      line-height: 1.5em;

      cursor: pointer;

      white-space: nowrap;

    }

  </style>

</head>

<body>

  <div class="boxDom" id="boxDom">

    <div class="idDom" id="idDom">

      <div class="content">

        <p class="title">弹幕:</p>

        <input type="text" class="text" id="text" />

        <button type="button" class="btn" id="btn">发射</button>

      </div>

    </div>

  </div>

</body>

<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    //注册事件

    var colors = ["red", "green", "orange", "yellow", "hotpink", "purple", "cyan"];

    $("#btn").click(function () {

      var randomColor = parseInt(Math.random() * colors.length);

      var randomY = parseInt(Math.random() * 400);

      $("<span></span>")

        .text($("#text").val())//设置内容

        .css("color", colors[randomColor])//设置字体颜色

        .css("left", 1400)//设置left值

        .css("top", randomY)//设置top值

        .animate({ left: -500 }, 10000, "linear", function () {

          //到了终点，需要删除

          $(this).remove();

        })

        .appendTo("#boxDom");

      $("#text").keyup(function (e) {

        if (e.keyCode == 13) {

          $("#btn").click();

        }

      });

    });

  });

</script>

</html>

jQuery---弹幕效果的更多相关文章

  1. 精彩的jquery弹幕效果

    html页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

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

    精彩的弹幕效果分享给大家,具有一定的参考价值,感兴趣的朋友可以尝试制作弹幕,具体内容如下   简易弹幕效果:将发布的内容随机显示在弹幕右侧,逐渐左移最后消失.   涉及知识点:val().random ...

  3. h5做直播的弹幕效果

    最近在搞弹幕效果所以就写一个关于弹幕的吧,刚开始寻思去网上找插件的,但找的插件和我的需求都不太相符,其实做弹幕我知道的有两种方法: 1:一种是用canvas和对象来完成弹幕想过,用canvas来完成弹 ...

  4. JQ实现弹幕效果

    JQ实现弹幕效果,快来吐糟你的想法吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charse ...

  5. marquee标签弹幕效果

    播放个视频的时候看到很有趣的弹幕,想着前端能不能做个弹幕效果.弹幕是滚动的,所以首先想到了<marquee>标签.但事实上,<marquee>标签不是w3c的标准,只是主流的浏 ...

  6. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

  7. JQuery动画效果

    jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...

  8. 分享5种风格的 jQuery 分页效果【附代码】

    jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示      源码下载 各个 ...

  9. 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】

    新鲜出炉的30个精美的 jQuery & CSS3 效果[附演示和教程]   作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 ...

  10. android 弹幕效果demo

    记得之前有位朋友在我的公众号里问过我,像直播的那种弹幕功能该如何实现?如今直播行业确实是非常火爆啊,大大小小的公司都要涉足一下直播的领域,用斗鱼的话来讲,现在就是千播之战.而弹幕则无疑是直播功能当中最 ...

随机推荐

  1. 【转载】Java的Vector，ArrayList，LinkedList

    首先看这两类都实现List接口,而List接口一共有三个实现类,分别是ArrayList.Vector和LinkedList.List用于存放多个元素,能够维护元素的次序,并且允许元素的重复.3个具体 ...

  2. SQLPLUS ed无法调出编辑面板 SP2-0107:无须保存

    现象: 重新启动oracle启动sqlplus,首先执行ed命令时出错,没有调出编辑命令的文件: SQL> edSP2-0107: 无须保存. 分析:出错的原因可能是临时编辑文件中没有需要执行的 ...

  3. 关于宏MACRO，我们需要知道的事

    一.先从最宏观的角度来了解宏,这里的宏观角度是指程序的运行流程: 1,提交代码后,SAS先把代码读取储存到堆栈中: 2,用文本扫描插件来扫描堆栈中的代码,从上到下,从左到右: 3,扫描到一个分号,则编 ...

  4. Zookeeper分布式系统协同器概念快速学习

    原文格式可以访问:https://www.rockysky.tech 分布式系统的基本操作 主节点选举:在绝大多数分布式系统中,都需要进行主节点选举.主节点负责管理协调其它节点或者同步集群中其它节点的 ...

  5. 显示层封装及实现与优化（无动画+css3动画+js动画）

    showhide.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  6. mysql数据库批量执行sql文件对数据库进行操作【windows版本】

    起因: 因工作需要,在本机测试环境升级mysql数据库,需逐条执行mysql数据库的sql文件对数据库进行升级,因此找了些关于mysql的文章,对批量升级数据库所需的sql文件进行升级. 整理思路: ...

  7. 【题解】 2月19日 厦门双十中学NOIP2014模拟D2 T1 采药人的切题规则

    Made by 退役的OIer 第一次写博客,写得不好 or 不清楚的可以 在下方留言,我会尽量改进的! 好啦~~~回到正题,题面见传送门 [问题描述] 采药人最近在认真切题,但回旋的转盘时常在眼前浮 ...

  8. VEH帮你定位程序崩溃地址

    之前朋友有一个服务端程序,总是受到一些人的恶意漏洞攻击,没有源代码,只好反汇编修复了漏洞,并且使用WinLicense加保护授权. 漏洞总不是一次可以修复完的,恶意攻击并没有停止,然后加了WL保护程序 ...

  9. 小白的linux笔记6：关于挂载硬盘

    每个硬盘,包括移动硬盘,插上之后都会有个名字,如sda,sdb,sdc.... sda,sdb等名字只与插上的顺序有关.而且重启后有可能会发生变化. 查看全部硬盘可以用fdisk -l. df -h  ...

  10. 用ArcGIS Runtime for Android建立简单App，展示地图

    1.新建AS项目 此处引用官网上新建项目的过程,很简单,不做翻译了. 2.配置ArcGIS Runtime for Android100.5.0环境 2-1.项目切换成Project 2-2 .选择P ...