雪花飘落 jq版

最新推荐文章于 2022-06-10 17:03:28 发布

huangkang1995

最新推荐文章于 2022-06-10 17:03:28 发布

阅读量258

点赞数

分类专栏：前端 jq 文章标签： js html css

本文链接：https://blog.csdn.net/huangkang1995/article/details/109176079

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

雪花飘落 js版

雪花下落的速度

snowflake.speed = [8000,10000];
速度为区间数值的随机数

雪花飘落的频率

使用setInterval定时器每800毫秒创建一个雪花
setInterval(“snowflake.snowflakeAdd()”,80);

图片路径自己替换下

<img src="images/christmas.jpg" style="width:100%;">

在这里插入图片描述

jq链接记得替换下

完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>雪花下落</title>
</head>
<script src="../js/jquery-1.7.2.min.js"></script>
<style>
*{padding: 0;margin: 0;}
body,html{
	background:#000;
	width: 100%;
	height: 100%;
	overflow:hidden;
}
#snowflakeBox{height:100%; position:relative;}
</style>
<div id="snowflakeBox">
	<img src="images/christmas.jpg" style="width:100%;">
</div>
<script>

function snowflake(snowflakeBox)
{
	var snowflakeThis = this;
	this.speed = [8000,10000]; //雪花下落的速度
	// 定义块初始位置样式
	this.draw = function(odiv)
	{
		var speedH = 0;  
		var startPosLeft = Math.ceil(Math.random() * $(document).width());//设置雪花随机的开始x值的大小
		var oOpacity = this.getRandInt(6,10)/10;  //设置透明度
		var oLeft = startPosLeft+'px';
		var oTop = "0px"; 
		var oColor = "#fff";
		var oFontSize = this.getRandInt(12,25)+"px";
		odiv.css({"opacity":oOpacity,"left":oLeft,"color":oColor,"font-size":oFontSize,"top":oTop});
		
		odiv.animate({"top":snowflakeBox.height() + 50,"left":parseInt(oLeft) + this.getRandInt(-100,100)+"px","opacity":"0"},
			this.getRandInt(this.speed[0],this.speed[1]),
			function(){
				odiv.remove();
			});
	}
	// 新增块
	this.snowflakeAdd = function()
	{
		var snowflakeOne = "<div class='snowflakeItem'>"; 
		snowflakeOne += this.randIcon();
		snowflakeOne += "</div>";
		
		snowflakeBox.append(snowflakeOne);   //把创建好的div放进flame中
		that = snowflakeBox.children(".snowflakeItem:last-child");
		this.draw(that);  //执行obj的draw方法
	}
	
	// 随机雪花
	this.randIcon = function()
	{
		var icon = ["❅","❄","❅","❄","✽"];	
		return icon[this.getRandInt(0,4)];
	}
	
	// 随机整数
	this.getRandInt = function(start,end)
	{
		var rand = parseInt(Math.random() * (end - start + 1) + start);
		return rand;
	}
	return this;
} 

$(function(){
	var snowflakeBox= $("#snowflakeBox");
	var snowflakeFunc = snowflake(snowflakeBox);
	//雪花下落的速度
	snowflakeFunc.speed = [8000,10000]; 
	snowflakeFunc.snowflakeAdd();
	/*使用setInterval定时器每80毫秒创建一个雪花*/
	setInterval(snowflakeFunc.snowflakeAdd,8);  
})
</script>
<style> 
.snowflakeItem{ position:absolute;}
</style>
</html>

huangkang1995

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
雪花飘落 jq版

雪花飘落 js版<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>雪花下落</title></head><script src="../js/jquery-1.7.2.min.js"></script><style>*{padding: 0;margin: 0;}bod
复制链接

扫一扫