jQuery实现的页面弹幕效果【测试可用】


Posted in jQuery onAugust 17, 2018

本文实例讲述了jQuery实现的页面弹幕效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>juqery弹幕</title>
<style>
*{
margin: 0px;
padding: 0px;
}
html,body{
width: 100%;
height: 100%;
font-family: "微软雅黑";
background-color: #ccc;
margin: 0;
padding: 0;
}
.boxDom{
width: 100%;
height: 800px;
position: relative;
overflow: hidden;
}
.boxDom img{
width: 100%;
height: 100%;
}
.idDom{
width: 100%;
height: 50px;
background-color: #666;
position: fixed;
bottom: 0px;
}
.content{
width: 600px;
height: 50px;
position: absolute;
left: 500px;
top:10px;
}
.title{
font-size: 25px;
display: inline;
vertical-align: bottom;
color: #fff;
}
.text{
width: 300px;
height: 30px;
border:none;
border-radius: 5px;
text-indent: 2em;
margin-left: 60px;
}
.btn{
width: 100px;
height: 30px;
margin-left: 20px;
font-size: 20px;
font-weight: 700;
color: #fff;
background-color: red;
border:none;
border-radius: 5px;
cursor: pointer;
}
.string {
width: 300px;
height: 40px;
margin-top: 20px;
position: absolute;
color: #000;
font-size: 20px;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<div class="boxDom" id="boxDom">
<!-- <img src="7.jpg" alt=""> -->
<div class="idDom">
<div class="content">
<p class="title">发送弹幕:</p>
<input type="text" class="text">
<button class="btn" id="btn" type="button">发送</button>
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function () {
var boxDom = $("#boxDom");
var top, right;
var pageWidth = parseInt($(document).width());
var pageHeight = parseInt($(document).height());
$("#btn").bind("click", auto);
//绑定回车键按钮
document.onkeydown = function(event){
if(event.keyCode == 13){
auto();
}
}
function auto() {
//获取输入的字符串
var str = $(".text").val();
//生成一个元素
var createSpan = $("<span class ='string'></span>");
//给元素赋值
createSpan.text(str);
//为了页面友好,清空刚输入的内容
$(".text").val("");
//生成元素一个随机的位置 为了使每一条弹幕都出现不同的位置
top = Math.floor(Math.random()*pageHeight);
createSpan.css({ "top": top, "right": -400, "color": getRandomColor() });
boxDom.append(createSpan);
//元素在dom运动起来
//首先有一个span,只让最后一个动起来
var spandom = $("#boxDom>span:last-child");//找到最后一个span
spandom.animate({"right":pageWidth+300},10000,function(){
$(this).remove();
});
}
//定义一个可以生成随机颜色的方法
function getRandomColor(){
var colorArr = ['1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
var color = "";
for(var i=0;i<6;i++){
color += colorArr[Math.floor(Math.random()*16)];
}
return "#"+color;
}
})
$(function () {
var boxDom = $("#boxDom");
var top, right;
var pageWidth = parseInt($(document).width());
var pageHeight = parseInt($(document).height());
$("#btn").bind("click", auto);
//绑定回车键按钮
document.onkeydown = function(event){
if(event.keyCode == 13){
auto();
}
}
function auto() {
//获取输入的字符串
var str = $(".text").val();
//生成一个元素
var createSpan = $("<span class ='string'></span>");
//给元素赋值
createSpan.text(str);
//为了页面友好,清空刚输入的内容
$(".text").val("");
//生成元素一个随机的位置 为了使每一条弹幕都出现不同的位置
top = Math.floor(Math.random()*pageHeight);
createSpan.css({ "top": top, "right": -400, "color": getRandomColor() });
boxDom.append(createSpan);
//元素在dom运动起来
//首先有一个span,只让最后一个动起来
var spandom = $("#boxDom>span:last-child");//找到最后一个span
spandom.animate({"right":pageWidth+300},10000,function(){
$(this).remove();
});
}
//定义一个可以生成随机颜色的方法
function getRandomColor(){
var colorArr = ['1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
var color = "";
for(var i=0;i<6;i++){
color += colorArr[Math.floor(Math.random()*16)];
}
return "#"+color;
}
})
</script>
</body>
</html>

运行效果如下图所示:

jQuery实现的页面弹幕效果【测试可用】

感兴趣的朋友还可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun,测试一下运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
关于jQuery库冲突的完美解决办法
May 20 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jQuery实现轮播图及其原理详解
Apr 12 #jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 #jQuery
jQuery轮播图实例详解
Aug 15 #jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 #jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 #jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 #jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 #jQuery
You might like
类的另类用法--数据的封装
2006/10/09 PHP
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
cakephp常见知识点汇总
2017/02/24 PHP
utf8的编码算法 转载
2006/12/27 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
用python代码做configure文件
2014/07/20 Python
django轻松使用富文本编辑器CKEditor的方法
2017/03/30 Python
查看Django和flask版本的方法
2018/05/14 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
python实现发送邮件
2021/03/02 Python
几道数据库的概念性面试题
2014/05/30 面试题
网络方面基础面试题
2012/11/16 面试题
港湾网络笔试题
2014/04/19 面试题
小学优秀班集体申报材料
2014/05/25 职场文书
国庆节活动总结
2014/08/26 职场文书
2015年小学体育工作总结
2015/05/22 职场文书
2015年测量员工作总结
2015/05/23 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS