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实现全选、全不选以及单选功能
Mar 23 jQuery
jQuery插件之validation插件
Mar 29 jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jQuery实现图片切换效果
Oct 19 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
jquery插件实现代码雨特效
Apr 24 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
php学习之数据类型之间的转换介绍
2011/06/09 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
js获取页面description的方法
2015/05/21 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
VsCode与Node.js知识点详解
2019/09/05 Javascript
vue实现倒计时获取验证码效果
2020/04/17 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
Python中判断输入是否为数字的实现代码
2018/05/26 Python
Django forms组件的使用教程
2018/10/08 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
大学生求职简历的自我评价
2013/10/14 职场文书
行政总监岗位职责
2013/12/05 职场文书
感恩老师演讲稿600字
2014/08/28 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
初中家长评语和期望
2014/12/26 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
代理词怎么写
2015/05/25 职场文书