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实现二级联动效果
Mar 30 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jQuery实现影院选座订座效果
Apr 13 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缓存类完整实例
2014/07/26 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
9个JavaScript评级/投票插件
2010/01/18 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
react的hooks的用法详解
2020/10/12 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
一文总结学习Python的14张思维导图
2017/10/17 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
使用keras2.0 将Merge层改为函数式
2020/05/23 Python
python+opencv实现车道线检测
2021/02/19 Python
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
中职生自我鉴定范文
2013/10/03 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
爱护公共设施标语
2014/06/24 职场文书
英文辞职信范文
2015/05/13 职场文书
开学第一天的感想
2015/08/10 职场文书
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server
redis protocol通信协议及使用详解
2022/07/15 Redis