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 DataTable实现前后台动态分页
Jun 17 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
jquery 键盘事件的使用方法详解
Sep 13 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jQuery获取随机颜色的实例代码
May 21 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 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图片水印实现代码(二种加水印方法)
2013/12/25 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
jquery ready()的几种实现方法小结
2010/06/18 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
Python根据区号生成手机号码的方法
2015/07/08 Python
Python实现简单拆分PDF文件的方法
2015/07/30 Python
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
pandas中的series数据类型详解
2019/07/06 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
Python能做什么
2020/06/02 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
一位农村小子的自荐信
2014/04/07 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
校车安全责任书
2014/08/25 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
小班上学期个人总结
2015/02/12 职场文书
Python Django获取URL中的数据详解
2021/11/01 Python
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers