jquery 仙女散花动画特效

最新推荐文章于 2023-03-10 17:22:00 发布

翌日阳

最新推荐文章于 2023-03-10 17:22:00 发布

阅读量4k

点赞数 1

文章标签： jquery js初级仙女散花动画特效

本文链接：https://blog.csdn.net/weixin_43043455/article/details/82810520

版权

本想写一个下雨的动画特效，最后在上面略微加了点样式，感觉像是仙女散花一样，所以起了个名字叫仙女散花，哈哈。。。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery彩色下雨动画特效</title>
	<script src="../../../File/jquery-3.3.1.js"></script>
	<style>
		*{
			margin:0;
			padding:0;
		}
		.content{
			width:500px;
			height:800px;
			background:#000;
			margin:10px auto;
			position:relative;
			overflow:hidden;
		}
		.content>div{
			width:10px;
			height:10px;
			border-radius:50%;
			position:absolute;
		}
	</style>
</head>
<body>
	//在html里面创建一个背景容器
	<div class="content"></div>
	<script>
		//定义一个计数器count和颜色切换计数器countColor
		var count = 1;
		var countColor = 0; 
		//先定义好不同的颜色，以便生成小点的时候取色
		var arr = ['red','orange','yellow','green','blue','white','violet','pink'];
		//定义一个函数，
		var cearter = function(){
			//创建小点，加入到容器里面，并为每个点创建一个class名
			$('.content').append('<div class= div' + count + '></div>');
			//为每个小点随机取一个左边距，是他们出生点不同，由于容器宽500像素，小点宽10像素，所以离左边距离随机宿可以在0~490像素内。
			var countLeft = Math.random()*490;
			//查找每个小点，并且附上css样式值，因为容器高800像素，所以最后动画特效top值由0到800像素
			var x = $(('.div' + count)).css({
				'left' : countLeft,
				'backgroundColor': arr[countColor],
			}).animate({
				'top':'800px'
			},2000);
			//创建出来的小点如果不清除，运行的时间越长，电脑就会出现卡顿，所以在这里每两秒以后清除创建出来的小点
			setTimeout(function(){
				x.remove();
			},2000)
			count++;
			countColor++;
			//循环取颜色
			if(countColor == 8){
				countColor = 0;
			}
			//在页面中显示的小点有限，class值没必要一直加下去，这里我取到200,然后循环
			if(count == 200){
				count = 0;
			}
		}
		//每10毫秒创建一个小点
	var time1 = setInterval('cearter()',10);
	</script>
</body>
</html>

最终效果图