一、下雪特效代码①
1 <script type=
"text/javascript">
2 (function($){
3 $.fn.snow =
function(options){
4 var $flake = $(
'<div id="snowbox" />').css({
'position':
'absolute',
'z-index':
'9999',
'top':
'-50px', 'cursor': 'pointer'}).html(
'❄'),
5 documentHeight =
$(document).height(),
6 documentWidth =
$(document).width(),
7 defaults =
{
8 minSize :
10,
9 maxSize :
20,
10 newOn :
1000,
11 flakeColor :
"#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
12 },
13 options =
$.extend({}, defaults, options);
14 var interval=
setInterval( function(){
15 var startPositionLeft = Math.random() * documentWidth -
100,
16 startOpacity =
0.5 Math.random(),
17 sizeFlake = options.minSize Math.random() *
options.maxSize,
18 endPositionTop = documentHeight -
200,
19 endPositionLeft = startPositionLeft -
500 Math.random() *
500,
20 durationFall = documentHeight *
10 Math.random() *
5000;
21 $flake.clone().appendTo(
'body').css({
22 left: startPositionLeft,
23 opacity: startOpacity,
24 'font-size': sizeFlake,
25 color: options.flakeColor
26 }).animate({
27 top: endPositionTop,
28 left: endPositionLeft,
29 opacity:
0.2
30 },durationFall,
'linear',function(){
31 $(
this).remove()
32 });
33 }, options.newOn);
34 };
35 })(jQuery);
36 $(function(){
37 $.fn.snow({
38 minSize:
5,
/* 定义雪花最小尺寸 */
39 maxSize:
50,
/* 定义雪花最大尺寸 */
40 newOn:
300 /* 定义密集程度，数字越小越密集 */
41 });
42 });
43 </script>
二、下雪特效代码②
1 <script type=
"text/javascript">
2 /* 控制下雪 */
3 function snowFall(snow) {
4 /* 可配置属性 */
5 snow = snow ||
{};
6 this.maxFlake = snow.maxFlake ||
200;
/* 最多片数 */
7 this.flakeSize = snow.flakeSize ||
10;
/* 雪花形状 */
8 this.fallSpeed = snow.fallSpeed ||
1;
/* 坠落速度 */
9 }
10 /* 兼容写法 */
11 requestAnimationFrame = window.requestAnimationFrame ||
12 window.mozRequestAnimationFrame ||
13 window.webkitRequestAnimationFrame ||
14 window.msRequestAnimationFrame ||
15 window.oRequestAnimationFrame ||
16 function(callback) { setTimeout(callback,
1000 /
60); };
17
18 cancelAnimationFrame = window.cancelAnimationFrame ||
19 window.mozCancelAnimationFrame ||
20 window.webkitCancelAnimationFrame ||
21 window.msCancelAnimationFrame ||
22 window.oCancelAnimationFrame;
23 /* 开始下雪 */
24 snowFall.prototype.start =
function(){
25 /* 创建画布 */
26 snowCanvas.apply(
this);
27 /* 创建雪花形状 */
28 createFlakes.apply(
this);
29 /* 画雪 */
30 drawSnow.apply(
this)
31 }
32 /* 创建画布 */
33 function snowCanvas() {
34 /* 添加Dom结点 */
35 var snowcanvas = document.createElement(
"canvas");
36 snowcanvas.id =
"snowfall";
37 snowcanvas.width =
window.innerWidth;
38 snowcanvas.height =
document.body.clientHeight;
39 snowcanvas.setAttribute(
"style",
"position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
40 document.getElementsByTagName(
"body")[
0].appendChild(snowcanvas);
41 this.canvas =
snowcanvas;
42 this.ctx = snowcanvas.getContext(
"2d");
43 /* 窗口大小改变的处理 */
44 window.onresize =
function() {
45 snowcanvas.width =
window.innerWidth;
46 /* snowcanvas.height = window.innerHeight */
47 }
48 }
49 /* 雪运动对象 */
50 function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
51 this.x = Math.floor(Math.random() * canvasWidth);
/* x坐标 */
52 this.y = Math.floor(Math.random() * canvasHeight);
/* y坐标 */
53 this.size = Math.random() * flakeSize
2;
/* 形状 */
54 this.maxSize = flakeSize;
/* 最大形状 */
55 this.speed = Math.random() *
1 fallSpeed;
/* 坠落速度 */
56 this.fallSpeed = fallSpeed;
/* 坠落速度 */
57 this.velY =
this.speed;
/* Y方向速度 */
58 this.velX =
0;
/* X方向速度 */
59 this.stepSize = Math.random() /
30;
/* 步长 */
60 this.step =
0 /* 步数 */
61 }
62 flakeMove.prototype.update =
function() {
63 var x =
this.x,
64 y =
this.y;
65 /* 左右摆动(余弦) */
66 this.velX *=
0.98;
67 if (
this.velY <=
this.speed) {
68 this.velY =
this.speed
69 }
70 this.velX = Math.cos(
this.step = .
05) *
this.stepSize;
71
72 this.y =
this.velY;
73 this.x =
this.velX;
74 /* 飞出边界的处理 */
75 if (
this.x >= canvas.width ||
this.x <=
0 ||
this.y >= canvas.height ||
this.y <=
0) {
76 this.reset(canvas.width, canvas.height)
77 }
78 };
79 /* 飞出边界-放置最顶端继续坠落 */
80 flakeMove.prototype.reset =
function(width, height) {
81 this.x = Math.floor(Math.random() *
width);
82 this.y =
0;
83 this.size = Math.random() *
this.maxSize
2;
84 this.speed = Math.random() *
1 this.fallSpeed;
85 this.velY =
this.speed;
86 this.velX =
0;
87 };
88 // 渲染雪花-随机形状（此处可修改雪花颜色！！！）
89 flakeMove.prototype.render =
function(ctx) {
90 var snowFlake = ctx.createRadialGradient(
this.x,
this.y,
0,
this.x,
this.y,
this.size);
91 snowFlake.addColorStop(
0,
"rgba(255, 255, 255, 0.9)");
/* 此处是雪花颜色，默认是白色 */
92 snowFlake.addColorStop(.
5,
"rgba(255, 255, 255, 0.5)");
/* 若要改为其他颜色，请自行查 */
93 snowFlake.addColorStop(
1,
"rgba(255, 255, 255, 0)");
/* 找16进制的RGB 颜色代码。 */
94 ctx.save();
95 ctx.fillStyle =
snowFlake;
96 ctx.beginPath();
97 ctx.arc(
this.x,
this.y,
this.size,
0, Math.PI *
2);
98 ctx.fill();
99 ctx.restore();
100 };
101 /* 创建雪花-定义形状 */
102 function createFlakes() {
103 var maxFlake =
this.maxFlake,
104 flakes =
this.flakes =
[],
105 canvas =
this.canvas;
106 for (
var i =
0; i < maxFlake; i
) {
107 flakes.push(
new flakeMove(canvas.width, canvas.height,
this.flakeSize,
this.fallSpeed))
108 }
109 }
110 /* 画雪 */
111 function drawSnow() {
112 var maxFlake =
this.maxFlake,
113 flakes =
this.flakes;
114 ctx =
this.ctx, canvas =
this.canvas, that =
this;
115 /* 清空雪花 */
116 ctx.clearRect(
0,
0, canvas.width, canvas.height);
117 for (
var e =
0; e < maxFlake; e
) {
118 flakes[e].update();
119 flakes[e].render(ctx);
120 }
121 /* 一帧一帧的画 */
122 this.loop =
requestAnimationFrame(function() {
123 drawSnow.apply(that);
124 });
125 }
126 /* 调用及控制方法 */
127 var snow =
new snowFall({maxFlake:
60});
128 snow.start();
129 </script>
三、下雪特效代码③
<script type=
"text/javascript">
window.onload =
function () {
var minSize =
5;
//最小字体
var maxSize =
50;
//最大字体
var newOne =
100;
//生成雪花间隔
var flakColor =
"#fff";
//雪花颜色
var flak = $(
"<div></div>").css({position:
"absolute",
"top":
"0px"}).html(
"❉");
//定义一个雪花
var dhight = $(window).height();
//定义视图高度
var dw =$(window).width()-
80;
//定义视图宽度
setInterval(function(){
var sizeflak = minSize Math.random()*maxSize;
//产生大小不等的雪花
var startLeft = Math.random()*dw;
//雪花生成是随机的left值
var startOpacity =
0.7 Math.random()*
0.3;
//随机透明度
var endTop= dhight-
100;
//雪花停止top的位置
var endLeft= Math.random()*dw;
//雪花停止的left位置
var durationfull =
5000 Math.random()*
5000;
//雪花飘落速度不同
flak.clone().appendTo($(
"body")).css({
"left":startLeft ,
"opacity":startOpacity,
"font-size":sizeflak,
"color":flakColor
}).animate({
"top":endTop,
"left":endLeft,
"apacity":
0.1
},durationfull,function(){
$(this).remove()
});
},newOne);
}
</script>
使用方法：
方法①、复制其中一种JS代码，粘贴到网站</body>标签之前即可；
方法②、去掉代码前后的<script **>标签，然后将代码保存为js文件，最后在网站引用即可。
方法③、直接在html页面中引用即可。
Ps：若没效果，请确认网页是否已载入JQurey，如果没有请在下雪代码之前引入JQ即可。
载入jquery
1 <script type=
"text/javascript" src=
"http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
2 <script type=
"text/javascript" src=
"http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
更多专业前端知识，请上
【猿2048】www.mk2048.com
