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>

思路解释

代码里面有注释

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果

    先看看JS+CSS+HTML实现"代码雨"类似黑客帝国文字下落最终效果: HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/ok.css" rel="external nofo

  • HTML+JS实现“代码雨”效果源码（黑客帝国文字下落效果）

    我们先看看HTML+JS实现"代码雨"的最终效果 1.绿色: 2.彩色: 3.背景色: 4.绿色逐渐变浅: 源代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Code -by ZhenYu.Sha</title>

  • canvas+gif.js打造自己的数字雨头像的示例代码

    canvas+gif.js打造自己的数字雨头像的示例代码

    前天 是1024程序员节,不知道各位看官过的怎么样.既然是过节,就要有个过节的样子,比方说,换个头像

  • jquery插件实现代码雨特效

    jquery插件实现代码雨特效

    本文实例为大家分享了jquery插件实现代码雨特效的具体代码,供大家参考,具体内容如下 代码雨特效 提供大概思路,虽然和目标的效果不一样,但是很容易举一反三改出对应效果的 效果如下 代码部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>做个代码雨</title> <script src="js/jquery-3.4.1.mi

  • jQuery插件实现无缝滚动特效

    jQuery插件实现无缝滚动特效

    首先来看下html骨架,如下: <div class="box"> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </div> 结构简单明了,没什么说的. 讲下实现原理: div box是最外层盒子,给它指定的宽高,记得给box添加一个 overflow:hidden (超出的内容隐藏)样式,因为滚动肯定是会超出b

  • JS实现代码雨特效

    JS实现代码雨特效

    本文实例为大家分享了JS实现代码雨特效的具体代码,供大家参考,具体内容如下 html代码 <canvas id="code_rain_canvas" width="1440" height="900"></canvas> js 代码 window.onload = function() {          //获取画布对象          var canvas = document.getElementById(&qu

  • jQuery插件pagination实现分页特效

    jQuery插件pagination实现分页特效

    实用jQuery分页特效插件jquery.pagination.js,基于jQuery实现,可根据pageselectCallback函数callback调用通过ajax调用动态数据,目前的方法是生成JSON数据到JS文件,调用的数据是JSON格式数据,缺点是数据是一次性读出来的,效率会差些,插件支持众多参数的自定义配置功能,还是很不错的,大家可以根据自己的想法进行改进. 使用方法: 1.加载插件和jQuery <link rel="stylesheet" href="

  • 完美兼容各大浏览器的jQuery插件实现图片切换特效

    文件里面的功能注释也写得非常详细(详见zoeDylan.ImgChange-1.0.1.js文件),对网友们的学习是很有帮助的,虽然样式不太好看,大家可以自己写,好好利用哦... JS代码部分: 复制代码 代码如下: (function ($) {     var//申明全局变量         _eleTemp,//缓存变量         _eleThis = $(this),//当前元素         _eleImg = $('.zd-imgChange-img'),//图片组元素   

  • 初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能

    初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能

    解决思路:1. 在标题处增加一个[-][+]号,供用户点击. 2. 用户收缩和展开屏幕的行为保存在Cookie里面.页面重新加载或者用户重新登录系统,仍然能记住用户的行为. 优点:1.使用Jquery插件的形式来做,容易扩展.容易实现. 2. 保存在Cookie的行为,容易实现,减少工作量,用户也能接收.如保存在数据库,则增加页面的负载. 缺点:不能每个页面使用单独行为,既是:每次用户的收缩和扩展在系统都是全局的.并且到其他计算机登录.或者清除缓存之后,就不能记住用户的操作了. 首先使用js函数

  • jquery 插件实现多行文本框[textarea]自动高度

    实现功能: 1/当textarea换行时自动增加一行高度 2/当textarea删除一行时 自动减少一行的高度 依赖:jquery.xxx.js 工作中需要使用类似功能但是觉得使用插件需要导入其他文件很不方便所以就写了一个 textarea jquery插件 复制代码 代码如下: <div class="form-group">     <label class="col-sm-3 control-label no-padding-right" f

  • 快速学习jQuery插件 jquery.validate.js表单验证插件使用方法

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证

  • jQuery插件的写法分享

    1.概述 先看看html代码 复制代码 代码如下: <ul id="catagory">    <li><a href="#">jQuery</a></li>    <li><a href="#">Asp.net</a></li>    <li><a href="#">Sql Server<

  • 动感效果的TAB选项卡jquery 插件

    动感效果的TAB选项卡jquery 插件

    效果图:动感效果的TAB选项卡 jquery 插件 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g

随机推荐