<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模拟水滴</title>
<script type="text/javascript">
setInterval(function()
{
var rain=document.createElement("div");
rain.style.position="fixed";
rain.style.width="2px"
rain.style.height="150px";
rain.style.background="url(img/shuidi.png)";
rain.style.filter="blur(1px)";
rain.style.top="0px";
rain.style.left=Math.random()*1920+"px";
rain.style.opacity=parseInt(Math.random()*10)/10+"";
document.body.appendChild(rain);
var timer=setInterval(function()
{
var height=parseInt(rain.style.top);
var k=1;
k++;
rain.style.top=height+5*Math.pow(k,2)+"px";
if(rain.style.top>="900px")
{
clearInterval(timer);
rain.parentNode.removeChild(rain);
}},10)
},10)
</script>
</head>
<body>
<img src="img/01.jpg" style="width: 1500px;height: 700px;">
</body>
</html>
知识点（敲黑板）
1.给整个页面添加背景图，在body标签中写background=“图片路径”
2.其中照片的大小也可以用数学函数模拟
rain.style.width=(Math.random()*4)+"px"
rain.style.height=Math.round((Math.random()*100+50))+"px";
切记不能写成rain.style.width=“Math.round((Math.random()*10))px”
3.filter:blur() 实现毛玻璃效果
rain.style.filter=“blur(1px)”;数字越大越模糊
4.opacity设置元素透明度（0-1：透明到不透明）
5.parseInt()详解
链接: 点我.
6.
1117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
