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用noConflict代替$的实现方法
Apr 12 jQuery
jQuery Tree Multiselect使用详解
May 02 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 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详细彻底学习Smarty
2008/03/27 PHP
PHP 数据库树的遍历方法
2009/02/06 PHP
PHP 写文本日志实现代码
2010/05/18 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
Python实现时间序列可视化的方法
2019/08/06 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
Python箱型图处理离群点的例子
2019/12/09 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
学生干部的自我评价分享
2014/01/18 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python