简单实现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实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 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实现文件下载功能的几个代码分享
2014/05/10 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
form自动提交实例讲解
2017/07/10 PHP
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
盘点提高 Python 代码效率的方法
2014/07/03 Python
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
Python基于template实现字符串替换
2020/11/27 Python
美国钻石商店:Zales
2016/11/20 全球购物
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
请假条的格式
2014/04/11 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
2015年度保密工作总结
2015/04/24 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
Python中的socket网络模块介绍
2022/07/23 Python