jQuery实现弹幕特效


Posted in jQuery onNovember 29, 2019

案例简介

jQuery实现弹幕效果,代码如下。

案例目录

jQuery实现弹幕特效

HTML部分

<!DOCTYPE html>


<html>
 <head>
 <meta charset="utf-8">
 <title>jQuery弹幕案例</title>
 <link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" />
 </head>
 <body>
 <div class="box">
 <div class="top"></div>
 <div class="bot">
 <input type="text" id="txt" placeholder="我来说两句。。。" />
 <button type="button" id="btn">发送</button>
 </div>
 </div>
 <script src="jquery-1.12.4.js"></script>
 <script>
 $(function() {
 var colors = ["red", "green", "hotpink", "pink", "cyan", "yellowgreen", "purple", "deepskyblue"];
 $("#btn").on("click", function() {
  var randomColor = parseInt(Math.random() * colors.length);
  var randomY = parseInt(Math.random() * 400);
  $("<span></span>") //创建span
  .text($("#txt").val()) //设置内容
  .css("color", colors[randomColor]) //设置字体颜色
  .css("left", "1400px") //设置left值
  .css("top", randomY) //设置top值
  .animate({
  left: -500
  }, 10000, "linear", function() {
  //到了终点,需要删除
  $(this).remove();
  }) //添加动画
  .appendTo(".top");

  $("#txt").val("");
 });
 });
 </script>
 </body>
</html>

CSS部分

* {
 margin: 0;
 padding: 0;
}

.box {
 width: 1600px;
 height: 757px;
}

.top {
 width: 100%;
 height: 660px;
 position: relative;
}

.bot {
 width: 100%;
 height: 97px;
 background-color: #666666;
 position: relative;
}

#txt {
 width: 300px;
 height: 30px;
 border-radius: 5px;
 position: absolute;
 left: 50%;
 margin-left: -150px;
 top: 50%;
 margin-top: -15px;
 border: none;
}

#btn {
 width: 60px;
 height: 30px;
 color: white;
 background-color: red;
 position: absolute;
 left: 955px;
 top: 34px;
 border: none;
}

span {
 position: absolute;
 color: #000;
 font-size: 50px;
 line-height: 1.5em;
 cursor: pointer;
 white-space: nowrap;
}

效果展示

jQuery实现弹幕特效

以上就是jQuery实现弹幕效果的代码,希望对您有帮助!

源码下载:jQuery弹幕

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

jQuery 相关文章推荐
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
jquery实现直播弹幕效果
Nov 28 #jQuery
jQuery实现简单弹幕效果
Nov 28 #jQuery
jQuery实现轮播图效果
Nov 26 #jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 #jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 #jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 #jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 #jQuery
You might like
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
smarty内置函数section的用法
2015/01/22 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012/02/27 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
浅谈Node Inspector 代理实现
2017/10/19 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
对python append 与浅拷贝的实例讲解
2018/05/04 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
python Gabor滤波器讲解
2020/10/26 Python
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
北京振戎融通Java面试题
2015/09/03 面试题
《掌声》教学反思
2014/02/23 职场文书
小学教师师德整改措施
2014/09/29 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL
Python中的xlrd模块使用整理
2021/06/15 Python
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers