jQuery---弹幕效果
弹幕效果
<!doctype html>
<html> <head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
font-family: "微软雅黑";
font-size: 62.5%;
} .boxDom {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
} .idDom {
width: 100%;
height: 50px;
background: #666;
position: fixed;
bottom: 0px;
} .content {
display: inline-block;
width: 430px;
height: 40px;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
} .title {
display: inline;
font-size: 4em;
vertical-align: bottom;
color: #fff;
} .text {
border: none;
width: 300px;
height: 30px;
border-radius: 5px;
font-size: 2.4em;
} .btn {
width: 60px;
height: 30px;
background: #f90000;
border: none;
color: #fff;
font-size: 2.4em;
} span {
width: 300px;
height: 40px;
position: absolute;
overflow: hidden;
color: #000;
font-size: 4em;
line-height: 1.5em;
cursor: pointer;
white-space: nowrap;
}
</style>
</head> <body> <div class="boxDom" id="boxDom">
<div class="idDom" id="idDom">
<div class="content">
<p class="title">弹幕:</p>
<input type="text" class="text" id="text" />
<button type="button" class="btn" id="btn">发射</button>
</div>
</div>
</div>
</body> <script src="jquery-1.12.4.js"></script>
<script> $(function () { //注册事件
var colors = ["red", "green", "orange", "yellow", "hotpink", "purple", "cyan"];
$("#btn").click(function () {
var randomColor = parseInt(Math.random() * colors.length);
var randomY = parseInt(Math.random() * 400);
$("<span></span>")
.text($("#text").val())//设置内容
.css("color", colors[randomColor])//设置字体颜色
.css("left", 1400)//设置left值
.css("top", randomY)//设置top值
.animate({ left: -500 }, 10000, "linear", function () {
//到了终点,需要删除
$(this).remove();
})
.appendTo("#boxDom"); $("#text").keyup(function (e) {
if (e.keyCode == 13) {
$("#btn").click();
}
});
});
}); </script> </html>
jQuery---弹幕效果的更多相关文章
- 精彩的jquery弹幕效果
html页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- 又一枚精彩的弹幕效果jQuery实现
精彩的弹幕效果分享给大家,具有一定的参考价值,感兴趣的朋友可以尝试制作弹幕,具体内容如下 简易弹幕效果:将发布的内容随机显示在弹幕右侧,逐渐左移最后消失. 涉及知识点:val().random ...
- h5做直播的弹幕效果
最近在搞弹幕效果所以就写一个关于弹幕的吧,刚开始寻思去网上找插件的,但找的插件和我的需求都不太相符,其实做弹幕我知道的有两种方法: 1:一种是用canvas和对象来完成弹幕想过,用canvas来完成弹 ...
- JQ实现弹幕效果
JQ实现弹幕效果,快来吐糟你的想法吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charse ...
- marquee标签弹幕效果
播放个视频的时候看到很有趣的弹幕,想着前端能不能做个弹幕效果.弹幕是滚动的,所以首先想到了<marquee>标签.但事实上,<marquee>标签不是w3c的标准,只是主流的浏 ...
- css3线条围绕跑马+jquery打字机效果
原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...
- JQuery动画效果
jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...
- 分享5种风格的 jQuery 分页效果【附代码】
jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示 源码下载 各个 ...
- 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】
新鲜出炉的30个精美的 jQuery & CSS3 效果[附演示和教程] 作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 ...
- android 弹幕效果demo
记得之前有位朋友在我的公众号里问过我,像直播的那种弹幕功能该如何实现?如今直播行业确实是非常火爆啊,大大小小的公司都要涉足一下直播的领域,用斗鱼的话来讲,现在就是千播之战.而弹幕则无疑是直播功能当中最 ...
随机推荐
- 【转载】wav文件格式分析与详解
WAV文件是在PC机平台上很常见的.最经典的多媒体音频文件,最早于1991年8月出现在Windows 3.1操作系统上,文件扩展名为WAV,是WaveFom的简写,也称为波形文件,可直接存储声音波形, ...
- Redis 为什么这么快?
1. 纯内存操作,肯定快 数据存储在内存中,读取的时候不需要进行磁盘的 IO 2. 单线程,无锁竞争损耗 单线程保证了系统没有线程的上下文切换 使用单线程,可以避免不必要的上下文切换和竞争条件,没有多 ...
- python实现自动点赞
1.思路通过pyautogui可以实现鼠标点击.滚动鼠标.截屏等操作.由此功能实现打开页面,进行点赞.aircv可以从大图像获得小图像的位置,利用pyautogui截屏得到的图片,可以在页面获取到每一 ...
- 通配符与标签!important的背景展示,也是让我怀疑人生了
是谁在耳边对我说!important提升权重优先级,只为这一句,我用了3600s研究通配符与标签!important的背景展示,也是让我怀疑人生了!选择器权值:标签选择器1,类选择器和伪类选择器:10 ...
- JS对象的概念、声明方式等及js中的继承与封装
对象的遍历 对象可以当做数组处理,使用for in var person={}; person.name="cyy"; person.age=25; person.infos=fu ...
- mysql 不能加载表问题
记录一次 mysql 5.7 下,出现重启数据库后不能加载特定表的问题处理. 搜索了很多的类似的错误,大多都是说因为外键同名的索引丢失的情况.但在5.7这个版本下,会禁止更新外键关联的索引. 最后经过 ...
- opencv —— remap 重映射
重映射的概念 重映射,就是把一幅图像中某位置的像素放置到另一个图片指定位置的过程. 实现重映射:remap 函数 将图像进行重映射几何变换,基于的公式为:dst (x, y) = src ( mapx ...
- 在 Nest.js 中使用 MongoDB 与 TypeORM
在 Nest.js 中使用 MongoDB 与 TypeORM 首先要在 database 文件夹里建立DatabaseModule模块文件, // database/database.module. ...
- 纪中23日c组T2 2159. 【2017.7.11普及】max 洛谷P1249 最大乘积
纪中2159. max 洛谷P1249 最大乘积 说明:这两题基本完全相同,故放在一起写题解 纪中2159. max (File IO): input:max.in output:max.out 时间 ...
- 框架里增加.env文件的作用
在实际开发中我们常常遇到这样的问题,就是开发地点不固定,这就造成了我们需要频繁的更改数据库配置,给开发工作造成了麻烦,.env环境文件的出现解决了这个麻烦,我们只需要在不同的工作地点配置好.env文件 ...