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


Posted in Javascript onJuly 25, 2016

简易弹幕效果:将发布的内容随机显示在弹幕右侧,逐渐左移最后消失。

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

涉及知识点:val()、random()、height()、css()、append()、remove()等,主要是元素的操作

html代码:

<a href="#">弹幕技术</a>
  <div class="mask">
    <a href="#" class="button">X</a>
  </div>
  <!-- 底部发言框前端 -->
  <div class="bottom">
    <input class="content"></input>
    <a href="#" class="send">发表言论</a>
  </div>

css代码:

html,body{
    background-image:url("images/208.jpg");
    height:100%;//文字的显示区域要设置好
  }
  div.mask{
    position:fixed;
    width:100%;
    height:100%;
    background-color:black;
    opacity:0.5;
    top:0px;
    left:0px;
  }
  div.bottom{
    width:100%;
    height:77px;
    background-color:#090909;
    position:fixed;
    bottom:0px;
    left:0px;
    text-align:center;
    line-height:77px;
  }
  div.bottom input.content{
    width:605px;
    height:37px;
    border:none;
    border-radius:10px 0px 0px 10px;
    font-size:16px;
    font-family:'Microsoft Yahei';
  }
  div.bottom a.send{
    background-color:green;
    color:#fff;
    display:inline-block;
    width:150px;
    height:40px;
    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:50px;
    height:50px;
    border-radius:30px;
    background-color:#660000;
    color:#fff;
    position:fixed;
    top:20px;
    right:20px;
    text-align:center;
    line-height:50px;
    font-size:30px;
    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;
  }

jQuery代码:

$('a.send').click(function(){
      //获取内容,创建新元素,并设置位置追加到目标元素中
      var val=$('input.content').val();
      var $content=$('<div class="text">'+val+'</div>');
      var top=Math.random()*$(document.body).height()-77;
      $content.css('top',top);
      $('div.mask').append($content);
      //移动到最右侧,直接删除该元素
      $content.animate({right:$(document.body).width()+100},8000,function(){
        $(this).remove();
      });
    });
    $('div.button').click(function(){
      $('div.mask').hide(2000);
    });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 Javascript
jQuery获取注册信息并提示实现代码
Apr 21 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
jquery动态导航插件dynamicNav用法实例分析
Sep 06 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
基于JS实现父组件的请求服务过程解析
Oct 14 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 #Javascript
前端微信支付js代码
Jul 25 #Javascript
javascript与jquery动态创建html元素示例
Jul 25 #Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 #Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 #Javascript
js微信分享API
Oct 11 #Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 #Javascript
You might like
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
Python实现批量下载图片的方法
2015/07/08 Python
python实现连续图文识别
2018/12/18 Python
django的ORM模型的实现原理
2019/03/04 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
Python中的类与类型示例详解
2019/07/10 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
共产党员批评与自我批评
2014/10/15 职场文书
婚前财产协议书范本
2014/10/19 职场文书
先进工作者推荐材料
2014/12/23 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
继承权公证书范本
2015/01/23 职场文书
军训新闻稿范文
2015/07/17 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL