<html>
<body>
<title>雪花效果</title>
<script type="text/javascript" src="http://img.baidu.com/js/tangram-1.3.0.js"></script>
<script src="Scripts/snow.js" type="text/javascript" ></script>
<style type="text/css">
.snow{font-family:verdana;color:white;position:absolute;vertical-align:baseline;padding: 0px;margin-top: -30px;}
.container{margin:0 auto;}
</style>
<div id="menu" class="menu"></div><!--雪花放置层-->
</body>
</html>
snow.js
(function () {
var V = 984; //雪花下落在地上的宽度
var H, N;
var W = [];
var L;
var P;
var G = 5; // 雪的密度大小
var R =10; //雪花距离屏幕左边的距离(估计)
var Q, M;
var E;
var J = false;
var I = false;
var O = false;
var B = 0;
var S = 0;
var F = [];
for (var U = 0; U < 4; U++) {
F.push(112 + Math.random() * 3)
}
function K(X, Y) {
this.dom = document.createElement("div");
this.dom.innerHTML = "*";
this.frameIndex = 0;
this.x = Math.random() * (Y - R * 2) + R / 2;
this.y = 0;
this.zoom = X;
this.xSpeed = 3; //雪花的横向速度
this.ySpeed = this.zoom * 5 + 1;
this.dom.className = "snow";
this.dom.style.fontSize = this.zoom * 4 + 12 + "px";
this.frames = [
{ x: this.x, y: this.y }
]
}
K.prototype.draw = function () {
var Y = this.frames[this.frameIndex++];
if (!Y) {
if (this.frames[this.frameIndex - 2].remove) {
P.removeChild(this.dom)
}
return false
}
var X = this.dom.style;
X.left = Y.x + "px";
X.top = Y.y + "px";
return true
};
K.prototype.update = function () {
this.x += this.xSpeed * Math.random();
this.y += this.ySpeed;
if (this.x > L - R) {
this.x = R
} else {
if (this.x < R) {
this.x = L - R
}
}
var X = { x: this.x, y: this.y };
return X
};
K.prototype.calculate = function () {
while (this.y < F[parseInt(this.x) % 4]) {
this.frames.push(this.update())
}
if (this.x < Q || this.x > M) {
for (var Y = 0, X = 80 / this.ySpeed; Y < X; Y++) {
this.frames.push(this.update())
}
var Z = this.update();
Z.remove = true;
this.frames.push(Z)
} else {
if (J) {
this.frames.push({ x: this.x, y: this.y, remove: true })
}
}
};
function C(X) {
var Z = [];
for (var Y = 0; Y < G; Y++) {
var a = new K(Math.random(), L);
X.appendChild(a.dom);
a.calculate();
Z.push(a)
}
return Z
}
function D() {
G = 0
}
function A() {
G = 5
}
function T() {
E = baidu.dom.create("div", { className: "snow-cover" });
baidu.g("menu").appendChild(E);
baidu.setStyle(baidu.g("menu"), "position", "relative");
P = document.createElement("div");
P.className = "container";
document.body.appendChild(P);
if (baidu.browser.ie) {
document.execCommand("BackgroundImageCache", false, true);
baidu.setStyle(baidu.g("menu"), "zoom", "1");
P.onselectstart = function () {
return false
};
document.onfocusout = D;
document.onfocusin = A
} else {
window.onblur = D;
window.onfocus = A
}
L = baidu.page.getWidth();
Q = baidu.g("menu").offsetLeft - 5;
M = V + Q;
N = setInterval(function () {
if (I) {
return
}
var X = document.createDocumentFragment();
W = W.concat(C(X));
P.appendChild(X);
S += G;
if (S > 0) {
if (S === 180 * G) {
J = true;
for (var Y = 0; Y < 4; Y++) {
F[Y] -= 3
}
S = -10
} else {
if (S > 50 * G) {
B += 0.01 * G / 5;
baidu.dom.setStyle(E, "opacity", B)
}
}
}
}, 300);
H = setInterval(function () {
if (I) {
return
}
for (var X = 0; X < W.length; X++) {
if (!W[X].draw()) {
W.splice(X, 1)
}
}
}, 60)
}
window.onresize = function () {
I = true;
if (J) {
for (var X = 0; X < 4; X++) {
F[X] += 3
}
}
J = false;
S = 0;
B = 0;
W.length = 0;
P.innerHTML = "";
baidu.dom.setStyle(E, "opacity", 0);
setTimeout(function () {
L = baidu.page.getWidth();
Q = baidu.g("menu").offsetLeft - 5;
M = V + Q;
I = false
},500)
};
T()
})();
CSS样式
.container
{
margin:0 auto;}
#menu {margin:0 auto; width:984px;}