简单实现jQuery弹幕效果


Posted in jQuery onMay 06, 2017

在要写一个弹幕案例的时候,首先要清楚每一步要干什么。
首先搭好框架之后在要发送弹幕时应该准备进行如下步骤:

  • 获取到要发送到弹幕上的内容,即获取到文本框输入的内容。通过jquery的var str = $(“#文本框的id”).val();
  • 生成一个元素:利用jQuery的 var createSpan =$(““)生成一个span元素,以便发送。
  • 给刚创建的span赋值,即获取到的文本框中的值 createSpan.text(str );
  • 设置元素的动画效果,是元素动起来。利用jQuery的animate(css样式值,时间, 执行完动画调用的方法)。执行完动画得手动移除刚刚所添加的元素。

里面还有许多细节,仔细看就会有收获!

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
 <title>弹幕案例</title>
 <script src = "http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
 <script>
 $(function(){
 var boxDom = $("#boxDom");
 //var domContent = $("#domContent");

 var top, right;

 var pageWidth = parseInt($(document).width());
 var pageHeight =parseInt($(document).height());

 //点击按钮
 $("#btn").bind("click",auto);//按钮绑定方法
 //按下回车
 document.onkeydown = function(){
  if(event.keyCode == 13){
  auto();
  }
 }
 function auto(){
 //1.获取输入的字符串
 var str = $(".text").val();
 //2.生成一个元素
 var createSpan = $("<span class = 'string' ></span>");

 //3.给生成的元素赋值

 createSpan.text(str);

 //为了页面友好,清空刚刚输入的值
 $(".text").val("");

 //生成元素一个随机的位置,为了使每条弹幕都出现在屏幕上不同的位置
 top = Math.floor(Math.random()*pageHeight);


 createSpan.css({"top":top, "right": -400, "color": getRandomColor()});
 boxDom.append(createSpan);

 //4.设置元素的动画效果,animate(css样式值,时间, 执行完动画调用的方法)

 //页面上有N个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>
 <style type="text/css">
 html,body{
 margin: 0px;
 padding: 0px;
 width: 100%;
 height: 100%;
 font-family: "微软雅黑";
 background: #ccc;
 }
 .boxDom{
 width: 100%;
 height: 100%;
 position: relative;
 overflow: hidden;
 }
 .idDom{
 width: 100%;
 height: 60px;
 background:#666;
 position: fixed;
 bottom: 0px;
 }
 .contet{
 width: 500px;
 height: 40px;
 position: absolute;
 top: 0px;
 right: 0px;
 bottom: 0px;
 left: 0px;
 margin: auto;

 }
 .title{
 display: inline;
 font-size: 24px;
 vertical-align: bottom;
 color: #ffffff;
 padding-left: 300px;
 }

 .text{
 width: 300px;
 height: 30px;
 border:none;
 border-radius:5px;
 font-size: 20px;
 margin-left:60px;
 }
 .btn{
 width: 60px;
 height: 30px;
 color: #ffffff;
 background-color: red;
 border:none;
 font-size:16px;
 margin-left:60px;
 margin-top: 20px;
 }
 .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="../images/bg_2.jpg" style="width:100%; height:100%" />
 <div id = "idDom" class = "idDom">
 <div class = "content">
  <p class = "title"> 说点什么:</p>
  <input type = "text" class = "text"/>
  <button type = "button" class = "btn" id = "btn" >发送</button>
 </div>
 </div>
</div>
</body>
</html>

效果图如下:

简单实现jQuery弹幕效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
jquery实现提示语淡入效果
May 05 #jQuery
Jquery获取radio选中的值
May 05 #jQuery
jQuery实现简单的抽奖游戏
May 05 #jQuery
jquery中each循环的简单回滚操作
May 05 #jQuery
jquery dataTable 获取某行数据
May 05 #jQuery
js和jquery中获取非行间样式
May 05 #jQuery
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 #jQuery
You might like
php的urlencode()URL编码函数浅析
2011/08/09 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
PHP输出日历表代码实例
2015/03/27 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
详解jquery和vue对比
2019/04/16 jQuery
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
python中的函数用法入门教程
2014/09/02 Python
在Python中处理时间之clock()方法的使用
2015/05/22 Python
python多进程共享变量
2016/04/06 Python
Python实现读取txt文件并画三维图简单代码示例
2017/12/09 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
Python实现密码薄文件读写操作
2019/12/16 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
Python实现数字的格式化输出
2020/08/01 Python
python 递归相关知识总结
2021/03/03 Python
应用数学自荐书范文
2013/11/24 职场文书
家长会演讲稿
2014/04/26 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
丧事答谢词大全
2015/09/30 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
MySQL创建定时任务
2022/01/22 MySQL
python lambda 表达式形式分析
2022/04/03 Python