• 售前

  • 售后

热门帖子
入门百科

jquery插件实现代码雨特效

[复制链接]
没有昵称513 显示全部楼层 发表于 2021-10-26 14:06:44 |阅读模式 打印 上一主题 下一主题
本文实例为大家分享了jquery插件实现代码雨特效的具体代码,供大家参考,具体内容如下
代码雨特效

提供大概思绪,固然和目的的结果不一样,但是很轻易闻一知十改出对应结果的
结果如下


代码部门
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>做个代码雨</title>
  6.   <script src="js/jquery-3.4.1.min.js"></script>
  7.   <style>
  8.    *{
  9.     margin: 0px;
  10.     padding: 0px;
  11.     user-select:none;
  12.    }
  13.    #div{
  14.     position: fixed;
  15.     top: 0px;
  16.     bottom: 0px;
  17.     left: 0px;
  18.     right: 0px;
  19.     background-color: black;
  20.     z-index: 1;
  21.    }
  22.    .item{
  23.     font-size: 12px;
  24.     position: absolute;
  25.     top: 0px;
  26.     bottom: 0px;
  27.     color: #2ecc71;
  28.     -webkit-writing-mode:vertical-lr;
  29.     /* animation: down 0.9s linear; */
  30.    }
  31.    /* 绘制动画帧 */
  32.    @keyframes down{
  33.     from{}
  34.     to{
  35.      opacity: 0;
  36.      top: 100%;
  37.     }
  38.    }
  39.   </style>
  40. </head>
  41. <body>
  42.   <div id="div">
  43.   </div>
  44. </body>
  45. </html>
  46. <script>
  47. var count = 15//每次产生多少条
  48. var time = 200//刷新间隔
  49. var num = 15//每条至多产生多少个字符
  50. var span = 1000//每条数据动画效果持续时间
  51. var tdown = 900//每条动画最多持续多久
  52. $(document).ready(function(){
  53.   setInterval(function(){
  54.    for(var i = 0;i<count;i++){
  55.     var str = getchar(num)//随机产生乱码
  56.     drawitem(str)//随机产生dom,然后给动画效果
  57.    }
  58.   },time)
  59. })
  60. function drawitem(str){
  61.   var op = parseFloat((Math.random()*1).toFixed(2));//初始透明度
  62.   var top = Math.floor(Math.random()*100)//初始高度
  63.   var left = Math.floor(Math.random()*100)//初始左距
  64.   var $item = $("<div class='item'>"+str+"</div>");
  65.   $item.appendTo($("#div"));
  66.   var tspan = parseFloat(Math.floor(Math.random()*tdown)/1000)
  67.   tspan=tspan<=0.5?0.5:tspan
  68.   $item.css({
  69.    'top':top+'%',
  70.    'left':left+'%',
  71.    'opacity':op,
  72.    'animation':'down '+tspan+'s linear'
  73.   })
  74.   
  75.   setTimeout(function(){
  76.    $item.remove();
  77.   },span)
  78. }
  79. function getchar(num){//随机产生一堆字符
  80.   num=num==undefined?1:Math.floor(Math.random()*num);
  81.   var str = "";
  82.   for(var i = 0;i<num;i++){
  83.    var n = Math.floor(Math.random()*256)
  84.    n  =String.fromCharCode(n);
  85.    str+=n;
  86.   }
  87.   return str;
  88. }
  89. </script>
复制代码
思绪表明
代码内里有注释
以上就是本文的全部内容,盼望对大家的学习有所帮助,也盼望大家多多支持草根技能分享。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作