js模拟动态图的雨滴掉落

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

js模拟动态图的雨滴掉落相关推荐

惊艳！可视化的 js：动态图演示 - 事件循环 Event Loop
原文地址:https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif 原文作者:Lydia Hallie 译者:夜尽天明译者博客 ...
python绘制动态模拟图-用python生成地球运动的动态模拟动态图
python作为一门简单易学且应用范围极广的语言有着其他语言无法比拟的优势,通过python可以实现各种各样的功能,例如我们可以利用python matplotlib的绘图库实现各种动态模拟仿真,在科 ...
python 三维地球_用python生成地球运动的动态模拟动态图
python作为一门简单易学且应用范围极广的语言有着其他语言无法比拟的优势,通过python可以实现各种各样的功能,例如我们可以利用python matplotlib的绘图库实现各种动态模拟仿真,在科 ...
python动态图形_用python生成地球运动的动态模拟动态图
python作为一门简单易学且应用范围极广的语言有着其他语言无法比拟的优势,通过python可以实现各种各样的功能,例如我们可以利用python matplotlib的绘图库实现各种动态模拟仿真,在科 ...
猿人学试题（非常简单js混淆、雪碧图、样式干扰 css加密、js混淆源码乱码、js混淆动态cookie、访问逻辑）
学习目标: python学习-猿人学试题学习内容: 1.非常简单js混淆 2.雪碧图.样式干扰 css加密 3.js混淆源码乱码 4.js混淆动态cookie 5.访问逻辑 1.非常简单js混淆试 ...
使用Kakapo.js进行动态模拟
by zzarcon 由zzarcon 使用Kakapo.js进行动态模拟 (Dynamic mocking with Kakapo.js) 3 months after the first comm ...
JS生成gif动态图下载
需求:通过动态变化的图生成一个gif图提供下载. 实现方案: 1.可通过服务端生成对应gif,然后前端请求下载 2.前端自己实现生成gif图片,自行下载采用方案: 前端实现方式,于是在网上找各种相关 ...
原生js模拟实现京东轮播图
原生js模拟实现京东轮播图一.实现原理 1. 官网发现 2. opacity和z-index 3.定位二.文档目录三.HTML结构四.css样式五.js行为_实现自动轮播与点击效果六.效果 ...
把鼠标放到图片后，(HTML+JS实现)静态图片变成动态图
前几天有个朋友问我这个问题:如何实现"把鼠标放到图片后,变成动态图",他估计是没学过JavaScript,其实这个问题实现起来还是挺简单的.下面简单说下: 原图片放静态图,为图片设 ...

js模拟动态图的雨滴掉落

js模拟动态图的雨滴掉落相关推荐

最新文章

热门文章