网页制作动态落雪效果（web应用）
制作的内容是：将一张照片设置网页的背景，并且在背景图上制作出落雪的效果，所实现的效果是雪花由上向下落下的动态页面，如下图所展示的：
一、样式设置 利用css选择器设置风格样式：
<style>
#m{
width: 1220px;
height:666px;
background: url("image/bg.jpg");
margin: auto;
position: relative;
overflow: hidden;
}
#m div{
color: #ffff;
font-size: 10px;
filter: blur(2px);
position: absolute;
}
</style>
二、创建雪花函数
function snowDown() {
//创建雪花
var snow = document.createElement(div);
var txt = document.createTextNode(.);
snow.appendChild(txt);
m.appendChild(snow);
//将雪花放在合适的位置
//将雪花散布在横向的位置
var y = -50;
var z = Math.random() * 1000;
snow.style.left = Math.random() * 1000 + "px";
//雪花的垂直位置
snow.style.top = y + "px";
//雪花的大小标记计算
snow.style.fontSize = Math.abs(z * 0.07 - 70) + 10 + "px";
//清晰度的标记计算
snow.style.opacity = Math.abs(z * 0.0006 - 0.6) + 0.2;
}
三、雪花下落函数 注意：下边这条语句是是用来标记雪花下落速度的，可以根据自己的需求，y值越大下落越快，反之越慢。
y +=Math.abs( z/1000-1)+0.5;
down();
function down() {
//每隔13毫秒执行本身down()函数
if(y>666)
{
snow.remove();
}
else
{
//数值计算，标记雪花下落速度不同
y +=Math.abs( z/1000-1)+0.5;
snow.style.top =y+"px";
setTimeout(down,13);
}
setTimeout(down,13);
}
四、整体代码 注意：对于所插入的照片可以设置一个包，专门来放照片如下：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<style>
#m{
width: 1220px;
height:666px;
background: url("image/bg.jpg");
margin: auto;
position: relative;
overflow: hidden;
}
#m div{
color: #ffff;
font-size: 10px;
filter: blur(2px);
position: absolute;
}
</style>
</head>
<body>
<div id="m">
<script>
var m=document.getElementById("m");
//每200毫秒执行一次下边的函数
setInterval(snowDown,500);
//一个雪花从出生到死亡的全过程
function snowDown() {
//创建雪花
var snow = document.createElement(div);
var txt = document.createTextNode(.);
snow.appendChild(txt);
m.appendChild(snow);
//将雪花放在合适的位置
//将雪花散布在横向的位置
var y = -50;
var z = Math.random() * 1000;
snow.style.left = Math.random() * 1000 + "px";
//雪花的垂直位置
snow.style.top = y + "px";
//雪花的大小标记计算
snow.style.fontSize = Math.abs(z * 0.07 - 70) + 10 + "px";
//清晰度的标记计算
snow.style.opacity = Math.abs(z * 0.0006 - 0.6) + 0.2;
}
//雪花下落
down();
function down() {
//每隔13毫秒执行本身down()函数
if(y>666)
{
snow.remove();
}
else
{
//数值计算，标记雪花下落速度不同
y +=Math.abs( z/1000-1)+0.5;
snow.style.top =y+"px";
setTimeout(down,13);
}
setTimeout(down,13);
}
</script>
</div>
</body>
</html>
上一篇：
IDEA上Java项目控制台中文乱码