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 相关文章推荐
javascript类型转换示例
Apr 29 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 Javascript
js判断鼠标移入移出方向的方法
Jun 24 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
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
7个超级实用的PHP代码片段
2011/07/11 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
JS继承用法实例分析
2015/02/05 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
python图形用户接口实例详解
2019/12/16 Python
Python3 读取Word文件方式
2020/02/13 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
临床医学大学生求职信
2013/09/28 职场文书
计算机大学生的自我评价
2013/10/15 职场文书
优秀毕业生自我鉴定
2014/01/19 职场文书
创先争优制度
2014/01/21 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
天河观后感
2015/06/11 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫
V Rising 服务器搭建图文教程
2022/06/16 Servers
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技