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

本文实例讲述了jQuery实现的弹幕效果。分享给大家供大家参考，具体如下：

看视频的时候老是会出现一些弹幕，对于这个看着很高大上的特效，其实也不难实现。

先来看看运行效果：

下面将整个代码显示出来：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jb51.net弹幕</title>
<style type="text/css">
  html,body{
    background:#efefef;
    height:100%;
  }
  .danmu{
    width: 100px;
    height:30px;
    line-height: 28px;
    background: green;
    border-radius: 5px;
    border:1px solid #fff;
    color: #fff;
    outline: none;
  }
  div.mask{
    position:fixed;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
    opacity:0.5;
    top:0px;
    left:0px;
  }
  div.bottom{
    width:100%;
    height:77px;
    background:linear-gradient(#ccc,#4a4a4a);
    position:fixed;
    bottom:0px;
    left:0px;
    text-align:center;
    line-height:77px;
  }
  div.bottom input.content{
    width:50%;
    min-width: 200px;
    height:37px;
    border:none;
    border-radius:10px 0px 0px 10px;
    font-size:16px;
    padding:0 10px;
    outline:none;
  }
  div.bottom a.send{
    background-color:green;
    color:#fff;
    display:inline-block;
    width:100px;
    height:38px;
    line-height:37px;
    text-align:center;
    position:relative;
    left:-10px;
    top:2px;
    border-radius:0px 10px 10px 0px;
    text-decoration:none;
    font-family:'Microsoft Yahei';
  }
  div.mask a.button{
    width:30px;
    height:30px;
    border-radius:50%;
    background-color:green;
    color:#fff;
    position:fixed;
    top:20px;
    right:20px;
    text-align:center;
    line-height:30px;
    font-size:20px;
    font-family:'Microsoft Yahei';
    border:1px solid #fff;
    text-decoration:none;
    cursor:pointer;
  }
  div.text{
    color:#fff;
    position:fixed;
    right:0px;
    font-size:20px;
    white-space: nowrap;
  }
</style>
</head>
<body>
<button class="danmu">弹幕技术</button>
  <div class="mask">
    <a href="#" rel="external nofollow" rel="external nofollow" class="button">X</a>
  </div>
  <!-- 底部发言框前端 -->
  <div class="bottom">
    <input class="content"></input>
    <a href="#" rel="external nofollow" rel="external nofollow" class="send">发表言论</a>
  </div>
  <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script>
   $("a.send").click(function(){
  var val=$(".content").val();
  var content=$("<div class='text'>"+val+"</div>");
  var top=Math.random()*$(document.body).height()+40+"px";
  content.css("top",top);
  $(".mask").append(content);
  content.animate({right:$(document.body).width()+100},8000,function(){
  $(this).remove();
  })
  });
  $('.button').click(function(){
      $('div.mask').fadeOut(500);
    });
    $(".danmu").click(function(){
     $('div.mask').fadeIn(500);
  });
</script>
</body>
</html>

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • 简单实现jQuery弹幕效果

    简单实现jQuery弹幕效果

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

  • 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实现弹幕效果

    效果如下: 代码如下: <!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实现弹幕效果

    用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弹幕效果,供大家参考,具体内容如下 页面效果如下: 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实现

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

  • 基于jQuery实现弹幕APP

    基于jQuery实现弹幕APP

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

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

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

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

  • jQuery实现的placeholder效果完整实例

    jQuery实现的placeholder效果完整实例

    本文实例讲述了jQuery实现的placeholder效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  • jQuery实现简单弹幕效果

    jQuery实现简单弹幕效果

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

  • js实现会跳动的日历效果(完整实例)

    js实现会跳动的日历效果(完整实例)

    一.简介 编写一个会动的日历,日历上面有年月日,周几,时分秒,效果如下: 年月日,周几,时分秒都会随着系统时间的走动而改变 二.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal

  • jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】

    本文实例讲述了jQuery实现导航滚动到指定内容效果.分享给大家供大家参考,具体如下: 做页面制作也有两年了,其中也做过许多页面效果,有简单的,也有复杂的,今天就来分享一个导航滚动到内容的特效. 平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有"小尾巴",今天我就介绍一款 jquery 做的滚动的特效,既可以设置滚动速度,又可以在 url 链接上没有"小尾巴". html: <!DOCTYPE

  • jquery拖拽效果完整实例(附demo源码下载)

    jquery拖拽效果完整实例(附demo源码下载)

    本文实例讲述了jquery实现的拖拽效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: html部分: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="

  • jquery实现的回旋滚动效果完整实例【附demo源码下载】

    jquery实现的回旋滚动效果完整实例【附demo源码下载】

    本文实例讲述了jquery实现的回旋滚动效果.分享给大家供大家参考,具体如下: 这里分享一款回旋滚动效果,先上效果图: 具体代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>jquery-roundabout</title> <style type="text/css&qu

  • jQuery实现页面顶部显示的进度条效果完整实例

    本文实例讲述了jQuery实现页面顶部显示的进度条效果.分享给大家供大家参考,具体如下: 具体代码如下: <!Doctype html> <html> <head> <title>页面顶部显示的进度条效果</title> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> </head> <body> <di

  • WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)

    WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)

    本文实例讲述了WebGL利用FBO完成立方体贴图效果的方法.分享给大家供大家参考,具体如下: 这篇主要记录WebGL的一些基本要点,顺便也学习下如何使用FBO与环境贴图.先看下效果图(需要支持WebGL,Chrome,火狐,IE11). 主要实现过程如下,先用FBO输出当前环境在立方体纹理中,再画出当前立方体,最后画球,并且把FBO关联的纹理贴在这个球面上. 开始WebGL时,最好有些OpenGL基础,在前面讲Obj完善与MD2时,大家可能已经发现了,因为着色器的添加使用,原来一些Opengl大

  • JS实现单击输入框弹出选择框效果完整实例

    JS实现单击输入框弹出选择框效果完整实例

    本文实例讲述了JS实现单击输入框弹出选择框效果的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 完整实例代码如下: <!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

随机推荐