JQ实现弹幕效果

 JQ实现弹幕效果,快来吐糟你的想法吧

 效果图:

 

 代码如下,复制即可使用:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>JQ实现弹幕效果</title><style type="text/css">*{padding: 0;margin: 0;}#box{height:700px;width:1000px;margin: 0 auto;border:1px solid #000000;position: relative;}#main{width:100%;height:605px;position: relative;overflow: hidden;}p{position: absolute;left:1000px;width:200px;top:0;}#bottom{width:100%;height:80px;background: #ABCDEF;text-align: center;padding-top: 15px;position: absolute;left: 0;bottom: 0;}#txt{width:300px;height:50px;    }#btn{width:100px;height:50px;                }</style></head><body><div id="box"><div id="main"></div><div id="bottom"><input type="text" id="txt" placeholder="请输入内容" /><input type="button" id="btn" value="发射" /></div></div><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script><script type="text/javascript">$(function(){var pageH=parseInt($("#main").height());var colorArr=["#cfaf12","#12af01","#981234","#adefsa","#db6be4","#f5264c","#d34a74"];                $("#btn").bind("click",auto);document.onkeydown=function(e){if(e.keyCode == 13){auto();}};function auto(){var $value = $("#txt").val();$("#main").append("<p>"   $value   "</p>");$("#txt").val("");var _top=parseInt(pageH*(Math.random()));var num=parseInt(colorArr.length*(Math.random()));$("p:last-child").css({"top":_top,"color":colorArr[num],"font-size":"20px"});$("p:last-child").animate({"left":"-200px"},10000);$("p:last-child").stop().animate({"left":"-300px"},10000,"linear",function(){$(this).remove();});                //console.log($value);
                };})</script></body>
</html>

 如有错误,欢迎联系我改正,非常感谢!!!


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/363934.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

获取表的所有列名

selectname fromsyscolumns whereidobject_id(表名)下面这样也可以:selectcolumn_name frominformation_schema.columns wheretable_name news转载于:https://www.cnblogs.com/zhuboxingzbx/archive/2007/09/03/880049.html

天下武功唯快不破------实验吧

题目地址&#xff1a;http://www.shiyanbar.com/ctf/1854 打开链接 全是英文&#xff0c;能力有限&#xff0c;翻译一下&#xff0c;好像没其他东西了&#xff0c;查看一下源码 让用post请求&#xff0c;丢到burp改一下 看到response有一个FLAG: UDBTVF9USElTX1QwX0NINE5HRV9GT…

JS实现文本中查找并替换字符

JS实现文本中查找并替换字符 效果图&#xff1a; 代码如下&#xff0c;复制即可使用&#xff1a; <!DOCTYPE html><html> <head><style type"text/css">*{font-family:"微软雅黑";font-size:16px;margin:0;padding:0;letter-spaci…

在没有IDE的情况下编译和运行Java

最近一个名为“ 不使用IDE编译Java软件包 ”的Java subreddit线程提出了一个问题&#xff1a;“是否有一个命令将软件包内的一组Java文件编译到一个单独的文件夹中&#xff08;以下简称为bin&#xff09;&#xff0c;以及如何我会去运行新的类文件吗&#xff1f;” 该帖子的作者…

[转]MySQL 表锁和行锁机制

本文转自&#xff1a;http://www.cnblogs.com/itdragon/p/8194622.html MySQL 表锁和行锁机制 行锁变表锁&#xff0c;是福还是坑&#xff1f;如果你不清楚MySQL加锁的原理&#xff0c;你会被它整的很惨&#xff01;不知坑在何方&#xff1f;没事&#xff0c;我来给你们标记几个…

使用JS实现文字搬运工

使用JS实现文字搬运工 效果图&#xff1a; 代码如下&#xff0c;复制即可使用&#xff1a; <!DOCTYPE html> <html><head><meta http-equiv"Content-Type" content"text/html; charsetUTF-8"> <title>使用JS实现文字搬运工&…

ActiveMQ –经纪人网络解释–第3部分

现在&#xff0c;我们已经在本博客系列的第1部分和第2 部分中了解了ActiveMQ网络连接器的基础&#xff0c;在第3部分中&#xff0c;我们将研究ActiveMQ如何平衡连接到代理网络的使用者。 介绍 当可以无序处理队列中的消息时通常使用并发使用者&#xff0c;通常可以提高消息吞吐…

Linux下用户组、文件权限详解=------转载文

转载自-----原文地址&#xff1a; https://www.cnblogs.com/123-/p/4189072.html Linux下用户组、文件权限详解 用户组 在linux中的每个用户必须属于一个组&#xff0c;不能独立于组外。在linux中每个文件有所有者、所在组、其它组的概念 - 所有者 - 所在组 - 其它组 - 改变用…

JS实现逼真的雪花飘落特效

逼真的雪花飘落特效 效果图&#xff1a; 图片素材 &#xff1a; --> ParticleSmoke.png 代码如下&#xff0c;复制即可使用&#xff1a; <!doctype html> <html> <head> <meta charset"UTF-8"> <meta name"renderer" conte…

阴影及定位

阴影及定位 隐藏及阴影 标签隐藏 1、显示方式 display display: none; /*表示在页面中隐藏&#xff0c;并且不占位&#xff0c;但是重新显示出来又会占位*/ 2、透明度 opacity opacity: 0; /* 0 代表完全透明 1 代表完全显示 但是即使是透明了也会在页面中占位*/ /* 显示方式透…

ActiveMQ –经纪人网络解释–第2部分

在此博客中&#xff0c;我们将看到双工网络连接器如何工作。 在上一部分中&#xff0c;我们从broker-1和broker-2创建了一个网络连接器。 我们能够看到当代理2上有一个使用者使用队列“ foo.bar”时&#xff0c;代理1上的队列“ foo.bar”的消息如何转发到代理2上的队列“ foo…

JQ实现情人节表白程序

JQ实现情人节表白页面 效果图&#xff1a; 表白利页&#xff0c;你值得拥有哦&#xff01; 代码如下&#xff0c;复制即可使用&#xff1a; <!doctype html> <html> <head> <meta charset"utf-8"> <title>JQ实现情人节表白程序<…

消息队列使用的四种场景介绍(转)

消息队列中间件是分布式系统中重要的组件&#xff0c;主要解决应用耦合&#xff0c;异步消息&#xff0c;流量削锋等问题 实现高性能&#xff0c;高可用&#xff0c;可伸缩和最终一致性架构 使用较多的消息队列有ActiveMQ&#xff0c;RabbitMQ&#xff0c;ZeroMQ&#xff0c;Ka…

一步一步SharePoint 2007之三十一:实现文档Event Handler(3)——附加Handler程序

摘要  本篇文章将介绍实现文档Event Handler的第三部分——附加Handler程序。正文  下面将记录每一步的操作过程。  1、首先打开我的网站&#xff0c;依次点击Document Center、Documents&#xff0c;进入Documents列表页面。  2、在Documents列表界面中点击Settings&a…

Day2 HTML基本标签元素

Day2 HTML基本标签元素 HTML: 超文本标记语言(HyperText Mark-up Language ) 1.作用&#xff1a;写网页结构    2.HTML不区分大小写&#xff0c;建议小写   3.文件后缀 .html 或者 .htm   4.html由浏览器解析执行. 由上往下&#xff0c;由左往右 1) HTML标…

作用域、执行环境、闭包(四)

本文也同步发表在我的公众号“我的天空” 上一期我们已经介绍了闭包&#xff0c;由于闭包可以延长函数内部的变量的生存周期&#xff0c;因此我们可以将不需要暴露在全局的变量封装成函数的内部变量&#xff0c;从而避免代码污染。 譬如要实现一个简单的累加器&#xff0c;为了…

php static_castunsigned int,C++ static_cast、dynamic_cast、const_cast和reinterpret_cast(四种类型转换运算符)...

上节讲到&#xff0c;隐式类型转换是安全的&#xff0c;显式类型转换是有风险的&#xff0c;C语言之所以增加强制类型转换的语法&#xff0c;就是为了强调风险&#xff0c;让程序员意识到自己在做什么。但是&#xff0c;这种强调风险的方式还是比较粗放&#xff0c;粒度比较大&…

AngularJS(九):路由

本文也同步发表在我的公众号“我的天空” AngularJS路由 AngularJS路由可以让我们通过不同的URL访问不同页面&#xff08;似乎是废话&#xff09;&#xff0c;其价值主要体现在单页面的web应用中&#xff08;single page web application&#xff0c;SPA&#xff09;&#xff0…

[C3W2] Structuring Machine Learning Projects - ML Strategy 2

第二周&#xff1a;机器学习策略&#xff08;2&#xff09;&#xff08;ML Strategy&#xff08;2&#xff09;&#xff09; 误差分析&#xff08;Carrying out error analysis&#xff09; 你好&#xff0c;欢迎回来&#xff0c;如果你希望让学习算法能够胜任人类能做的任务&a…

mysql语句执行顺序图示

转载于:https://www.cnblogs.com/whalesea/p/10382227.html