雪花特效

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<title>雪花特效</title>
<script src="./jquery.min.js"></script>
<script src="./index.js"></script>
</head>
<style>
body{
background: #87CEEB;
height: 120%;
width: 120%;
}
</style>
<body>

</body>
</html>

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
//现在开始写雪花效果
//先写一个创建雪花的方法

//雪花数量
var COUNT = 30;
//间隔时间
var TIME = 10;
//下降速度
var SPEED = 1;
//最大风速
var MAX_WIND_V = 2;
//装雪花的容器
var snowflakes = [];

//页面高度
var PAGE_HEIGHT = window.innerHeight;
//页面宽度
var PAGE_WIDTH = window.innerWidth;

//风速
var windV = 0;
//风向(0,无风 1,左向右吹,-1,右向左吹)
var windD = 1;

//创建一个雪花
function createSnowflake(){
var div = $('<div>❄</div>');

div.css('position','absolute');//绝对定位
div.css('opacity',0.898);//不透明度
div.css('color','white');//颜色
div.css('left','0px');
div.css('top','-100px');

return div;
}

//下降
function land(snowflake){
var cb = function(){
var top = snowflake.offset().top - $(document).scrollTop();
var left = snowflake.offset().left;

//如果雪花下降超过了屏幕范围,就让他重新开始
if(top > PAGE_HEIGHT){
duang(snowflake);
return;
}

snowflake.css('top',top + $(document).scrollTop() + SPEED + 'px');
snowflake.css('left', left + windD * windV);


setTimeout(cb,TIME);
};

return cb;
}

function duang(snowflake){
//随机雪花横坐标
var left = Math.random() * PAGE_WIDTH;
//随机雪花纵坐标
var top = 0 - 600 * Math.random();
//随机雪花大小
var size = 5 + 50 * Math.random();
//随机雪花透明度
var opacity = Math.random();

snowflake.css('left',left + 'px');
snowflake.css('top',top + 'px');
snowflake.css('font-size',size + 'px');
snowflake.css('opacity',opacity);

land(snowflake)();
}


$(function(){
//初始化雪花
for(var i = 0; i < COUNT; i++){
var snowflake = createSnowflake();
snowflakes.push(snowflake);
$(document.body).append(snowflake);
// duang(snowflake);
}

for(var i = 0; i < COUNT; i++){
(function(i){
setTimeout(function(){
duang(snowflakes[i]);
},1000 * Math.random());
})(i);
}

//间隔时间循环执行
setInterval(function(){
//随机产生一个方向
var ran1 = Math.random();
if(ran1 < 0.3){
//无风
windD = 0;
}else if(ran1 < 0.6){
//左向右吹
windD = 1;
}else{
//右向左吹
windD = -1;
}

windV = Math.random() * MAX_WIND_V;

//随机产生风速
},5000 * Math.random());
});

运行效果示例

你的鼓励,是我前进的动力!