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插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
详解jQuery中的easyui
Sep 02 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 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
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
php递归函数怎么用才有效
2018/02/24 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
python实现马耳可夫链算法实例分析
2015/05/20 Python
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
pandas数据清洗,排序,索引设置,数据选取方法
2018/05/18 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
python 用下标截取字符串的实例
2018/12/25 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
解决Python中回文数和质数的问题
2019/11/24 Python
Python request中文乱码问题解决方案
2020/09/17 Python
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
精选干货:Java精选笔试题附答案
2014/01/18 面试题
公司离职证明范本
2014/01/13 职场文书
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
农民工创业典型事迹
2014/01/25 职场文书
安踏广告词改编版
2014/03/21 职场文书
安阳殷墟导游词
2015/02/10 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
科普 | 业余无线电知识-波段篇
2022/02/18 无线电
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python
Linux中各个目录的作用与内容
2022/06/28 Servers