jquery插件实现代码雨特效


Posted in jQuery onApril 24, 2021

本文实例为大家分享了jquery插件实现代码雨特效的具体代码,供大家参考,具体内容如下

代码雨特效

提供大概思路,虽然和目标的效果不一样,但是很容易举一反三改出对应效果的

效果如下

jquery插件实现代码雨特效

代码部分

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>做个代码雨</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <style>
   *{
    margin: 0px;
    padding: 0px;
    user-select:none;
   }
   #div{
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: black;
    z-index: 1;
   }
   .item{
    font-size: 12px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    color: #2ecc71;
    -webkit-writing-mode:vertical-lr;
    /* animation: down 0.9s linear; */
   }
   /* 绘制动画帧 */
   @keyframes down{
    from{}
    to{
     opacity: 0;
     top: 100%;
    }
   }
  </style>
 </head>
 <body>
  <div id="div">
  </div>
 </body>
</html>
<script>
 var count = 15//每次产生多少条
 var time = 200//刷新间隔
 var num = 15//每条至多产生多少个字符
 var span = 1000//每条数据动画效果持续时间
 var tdown = 900//每条动画最多持续多久
 $(document).ready(function(){
  setInterval(function(){
   for(var i = 0;i<count;i++){
    var str = getchar(num)//随机产生乱码
    drawitem(str)//随机产生dom,然后给动画效果
   }
  },time)
 })
 function drawitem(str){
  var op = parseFloat((Math.random()*1).toFixed(2));//初始透明度
  var top = Math.floor(Math.random()*100)//初始高度
  var left = Math.floor(Math.random()*100)//初始左距
  var $item = $("<div class='item'>"+str+"</div>");
  $item.appendTo($("#div"));
  var tspan = parseFloat(Math.floor(Math.random()*tdown)/1000)
  tspan=tspan<=0.5?0.5:tspan
  $item.css({
   'top':top+'%',
   'left':left+'%',
   'opacity':op,
   'animation':'down '+tspan+'s linear'
  })
  
  setTimeout(function(){
   $item.remove();
  },span)
 }
 function getchar(num){//随机产生一堆字符
  num=num==undefined?1:Math.floor(Math.random()*num);
  var str = "";
  for(var i = 0;i<num;i++){
   var n = Math.floor(Math.random()*256)
   n  =String.fromCharCode(n);
   str+=n;
  }
  return str;
 }
</script>

思路解释

代码里面有注释

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

jQuery 相关文章推荐
jQuery tip提示插件(实例分享)
Apr 28 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
jquery插件实现搜索历史
Apr 24 #jQuery
jquery插件实现图片悬浮
jQuery实现影院选座订座效果
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
jQuery treeview树形结构应用
Mar 24 #jQuery
jQuery实现鼠标拖动图片功能
Mar 04 #jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 #jQuery
You might like
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
PHP CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
javascript实现俄罗斯方块游戏的思路和方法
2015/04/27 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
webpack file-loader和url-loader的区别
2019/01/15 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
Python库安装速度过慢解决方案
2020/07/14 Python
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
巴西购物网站:Onofre Agora
2020/06/08 全球购物
业务员岗位职责
2013/11/16 职场文书
学生自我评价范文
2014/02/02 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers
Python时间操作之pytz模块使用详解
2022/06/14 Python