模拟动态图的雨滴掉落

程序员文章站 2024-01-19 12:58:16

...

<!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.

模拟动态图的雨滴掉落

模拟动态图的雨滴掉落

flash模拟曲柄运动的动态图

flash模拟曲柄运动的动态图