jQuery实现弹幕效果


Posted in Javascript onFebruary 17, 2017

效果如下:

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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Cookie 小记
Apr 01 Javascript
jquery图片上下tab切换效果
Mar 18 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
node.js中的console.error方法使用说明
Dec 10 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
Ajax基础知识详解
Feb 17 #Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 #Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 #Javascript
原生js实现日期计算器功能
Feb 17 #Javascript
Vue自定义指令拖拽功能示例
Feb 17 #Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 #Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 #Javascript
You might like
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
PHP学习记录之数组函数
2018/06/01 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
js表格分页实现代码
2009/09/18 Javascript
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
python简单分割文件的方法
2015/07/30 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
python 中split 和 strip的实例详解
2017/07/12 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
领导干部考察材料
2014/02/08 职场文书
主持词开场白
2014/03/17 职场文书
工会换届选举方案
2014/05/21 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
学生会主席任命书
2015/09/21 职场文书
html5表单的required属性使用
2021/07/07 HTML / CSS
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server