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获取radio选中的值
May 05 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 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
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
jQuery 树形结构的选择器
2010/02/15 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
Python端口扫描简单程序
2016/11/10 Python
Python实现的计算器功能示例
2018/04/26 Python
有关Python的22个编程技巧
2018/08/29 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
中科软测试工程师面试题
2012/06/16 面试题
某公司面试题
2012/03/05 面试题
护士的岗位职责
2013/12/04 职场文书
高三体育教学反思
2014/01/29 职场文书
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
优秀毕业生事迹材料
2014/02/12 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
教师求职自荐书
2014/06/14 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
思想品德评语大全
2014/12/31 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers