32 jQuery——自制飞粒特效

效果先看

知识点

jQuery节点操作

append()追加节点

js属性操作

setAttribute() 设置属性（覆盖型）

jQuery动画

animate();//请查看api

window对象定时与间隔执行操作

setInterval()；//间隔执行
setTimeout()；//定时执行
具体查看api

页面载入事件

$(document).ready(fn)

获取浏览器长宽（或网页长宽）

// var ScreenWidth = document.body.clientWidth;网页宽
var ScreenWidth = window.innerWidth-10;
var ScreenHeight = window.innerHeight-10;

完整代码

需要准备好jQuery文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>天降粒子</title>
		<script src="js/jQuery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- <script src="js/texiao.js" type="text/javascript" charset="utf-8"></script> -->
		<script type="text/javascript">
			$(document).ready(function(){
				window.setInterval("fly()",0);//数字为秒生产（1000/10）个div 
			});
			function fly(){
				//获取屏幕(或网页)宽高
				// var ScreenWidth = document.body.clientWidth;网页宽
				var ScreenWidth = window.innerWidth-10;
				var ScreenHeight = window.innerHeight-10;
				// 生成随机id
				var str = String.fromCharCode(Math.floor(Math.random()*26+65));
				var num = Math.floor(Math.random()*10000);
				var id = str + num;
				//生成随机宽高
				var length = Math.ceil(Math.random()*10);
				//生成随机速度
				var speed = Math.floor(Math.random()*17000+1000);
				//生成随机颜色
				var r = Math.floor(Math.random()*155);
				var g = Math.floor(Math.random()*150);
				var b = Math.floor(Math.random()*55);
				var color = 'rgb('+r+','+g+','+b+')';
				//添加div
				$("body").append("<div id='"+id+"'></div>");
				//初始随机位置
				var x = -30;
				var y = Math.floor(Math.random()*ScreenWidth);
				var div = $("#"+id);
				div[0].setAttribute("style",""+length+"px;height:"+length+"px;background-color: "+color+";position: absolute;left:"+y+"px;top:"+x+"px;border-radius:"+(length/2)+"px;");
				//动画开始
				div.animate({top:''+ScreenHeight+'px'},speed);//动画时长:移动速度
				//动画结束删除对象
				window.setTimeout(function(){
				div.remove()
				},speed)
			}
		</script>
		<style>
			body{
				background-color: black;
			}
		</style>
	</head>
	<body>
		<div id="" style="color:white">
		</div>
	</body>
</html>