冬天到了,很多的博客空间都加了雪花的效果,于是去看了看他们的效果实现。有好几个效果代码,就拿过来了,有需要的朋友可以拿过去试试看。
雪花大图片:
<script type=
"text/javascript"
language=
"javascript"
>
(
function
() {
function
k(a, b, c) {
if
(a.addEventListener) a.addEventListener(b, c,
false
);
else
a.attachEvent && a.attachEvent(
"on"
+ b, c)
}
function
g(a) {
if
(
typeof
window.onload !=
"function"
) window.onload = a;
else
{
var
b = window.onload;
window.onload =
function
() {
b();
a()
}
}
}
function
h() {
var
a = {};
for
(type
in
{
Top:
""
,
Left:
""
}) {
var
b = type ==
"Top"
?
"Y"
:
"X"
;
if
(
typeof
window[
"page"
+ b +
"Offset"
] !=
"undefined"
)
a[type.toLowerCase()] = window[
"page"
+ b +
"Offset"
];
else
{
b = document.documentElement.clientHeight ? document.documentElement: document.body;
a[type.toLowerCase()] = b[
"scroll"
+ type]
}
}
return
a
}
function
l() {
var
a = document.body,
b;
if
(window.innerHeight) b = window.innerHeight;
else
if
(a.parentElement.clientHeight) b = a.parentElement.clientHeight;
else
if
(a && a.clientHeight) b = a.clientHeight;
return
b
}
function
i(a) {
this
.parent = document.body;
this
.createEl(
this
.parent, a);
this
.size = Math.random() * 5 + 5;
this
.el.style.width = Math.round(
this
.size) +
"px"
;
this
.el.style.height = Math.round(
this
.size) +
"px"
;
this
.maxLeft = document.body.offsetWidth -
this
.size;
this
.maxTop = document.body.offsetHeight -
this
.size;
this
.left = Math.random() *
this
.maxLeft;
this
.top = h().top + 1;
this
.angle = 1.4 + 0.2 * Math.random();
this
.minAngle = 1.4;
this
.maxAngle = 1.6;
this
.angleDelta = 0.01 * Math.random();
this
.speed = 2 + Math.random()
}
var
j =
false
;
g(
function
() {
j =
true
});
var
f =
true
;
window.createSnow =
function
(a, b) {
if
(j) {
var
c = [],
m = setInterval(
function
() {
f && b > c.length && Math.random()
< b * 0.0025 && c.push(
new
i(a)); ! f && !c.length && clearInterval(m);
for
(
var
e = h().top, n = l(), d = c.length - 1; d >= 0; d--)
if
(c[d])
if
(c[d].top < e || c[d].top + c[d].size + 1 > e + n) {
c[d].remove();
c[d] =
null
;
c.splice(d, 1)
}
else
{
c[d].move();
c[d].draw()
}
},
40);
k(window,
"scroll"
,
function
() {
for
(
var
e = c.length - 1; e >= 0; e--) c[e].draw()
})
}
else
g(
function
() {
createSnow(a, b)
})
};
window.removeSnow =
function
() {
f =
false
};
i.prototype = {
createEl:
function
(a, b) {
this
.el = document.createElement(
"img"
);
this
.el.setAttribute
(
"src"
, b +
"雪花图片的绝对链接地址"
);
this
.el.style.position =
"absolute"
;
this
.el.style.display =
"block"
;
this
.el.style.zIndex =
"99999"
;
this
.parent.appendChild(
this
.el)
},
move:
function
() {
if
(
this
.angle <
this
.minAngle ||
this
.angle >
this
.maxAngle)
this
.angleDelta = -
this
.angleDelta;
this
.angle +=
this
.angleDelta;
this
.left +=
this
.speed * Math.cos(
this
.angle * Math.PI);
this
.top -=
this
.speed * Math.sin(
this
.angle * Math.PI);
if
(
this
.left < 0)
this
.left =
this
.maxLeft;
else
if
(
this
.left >
this
.maxLeft)
this
.left = 0
},
draw:
function
() {
this
.el.style.top = Math.round(
this
.top) +
"px"
;
this
.el.style.left = Math.round(
this
.left) +
"px"
},
remove:
function
() {
this
.parent.removeChild(
this
.el);
this
.parent =
this
.el =
null
}
}
})();
createSnow(
""
, 40);
</script>
将以上面代码直接复制粘贴到主题中的Header或者Footer文件中,如果你只想让文章页面显示,那就直接添加到single就可以了。 下面把雪花图片(所需的素材)提供给大家,
丨夸米科技丨
咨询直线:186-2370-8562 官方网站:www.quamae.com