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,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jquery插件实现图片悬浮
Apr 16 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
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
鼠标图片振动代码
2006/07/06 Javascript
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
JqGrid web打印实现代码
2011/05/31 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
python日志logging模块使用方法分析
2019/05/23 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
python datetime中strptime用法详解
2019/08/29 Python
Python读取yaml文件的详细教程
2020/07/21 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
平民服装店创业计划书
2014/01/17 职场文书
励志演讲稿300字
2014/08/21 职场文书
秦兵马俑导游词
2015/02/02 职场文书
django学习之ajax post传参的2种格式实例
2021/05/14 Python
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android
Python中time与datetime模块使用方法详解
2022/03/31 Python
python区块链持久化和命令行接口实现简版
2022/05/25 Python