又一枚精彩的弹幕效果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 动态生成方法的例子
Jul 22 Javascript
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
js 居中漂浮广告
Mar 21 Javascript
jquery 图片上传按比例预览插件集合
May 28 Javascript
JS获取随机数函数可自定义最小值最大值
May 08 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
深入浅出ES6之let和const命令
Aug 25 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
JavaScript this绑定过程深入详解
Dec 07 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 Javascript
js实现橱窗展示效果
Jan 11 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
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
php分页函数示例代码分享
2014/02/24 PHP
php微信开发之关注事件
2018/06/14 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
用jscript启动sqlserver
2007/06/21 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
使用js实现数据格式化
2014/12/03 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
谈谈python垃圾回收机制
2020/09/27 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
同程旅游英文网站:LY.com
2018/11/13 全球购物
大学毕业寄语大全
2014/04/10 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
法律意见书范本
2015/06/04 职场文书
小学语文国培研修日志
2015/11/13 职场文书