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插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jQuery实现获取多选框的值示例
Feb 07 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
第九节 绑定 [9]
2006/10/09 PHP
PHP实现MVC开发得最简单的方法――模型
2007/04/10 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
python在命令行下使用google翻译(带语音)
2014/01/16 Python
理解python多线程(python多线程简明教程)
2014/06/09 Python
对于Python中线程问题的简单讲解
2015/04/03 Python
把pandas转换int型为str型的方法
2019/01/29 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
中学家长会邀请函
2014/01/17 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
运动会演讲稿300字
2014/08/25 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
运动员代表致辞
2015/07/29 职场文书