jquery插件怎么实现代码雨特效

2023-06-14 19:06:14 375人浏览安东尼

摘要

这篇文章将为大家详细讲解有关Jquery插件怎么实现代码雨特效，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。jquery是什么jquery是一个简洁而快速的javascript库，它具有独特的链式语法和短

这篇文章将为大家详细讲解有关Jquery插件怎么实现代码雨特效，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

jquery是什么

jquery是一个简洁而快速的javascript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的CSS选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、html文档遍历、ajax交互和动画，以便快速开发网站。

本文实例为大家分享了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;       }      @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插件怎么实现代码雨特效”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: jquery插件怎么实现代码雨特效

本文链接: https://www.lsjlt.com/news/274562.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341