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中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
jQuery实现日历效果
Sep 11 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 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动态添加url查询参数的方法
2015/04/14 PHP
php利用header函数下载各种文件
2016/08/24 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
2016/05/09 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
vue实现文字加密功能
2019/09/27 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
python计算书页码的统计数字问题实例
2014/09/26 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
浅谈Python 递归算法指归
2019/08/22 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
C#面试题
2016/05/06 面试题
夜大自我鉴定
2013/10/31 职场文书
工商企业管理应届生求职信
2013/11/03 职场文书
电子信息专业应届生自荐信
2014/06/04 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
班级班风口号大全
2015/12/25 职场文书
Win11快速关闭所有广告推荐
2022/04/19 数码科技