文章详情
雨一直下,dom制作下雨动画...
标签:
  • javascript
日期:2021-6-22 18:05
摘要:不能忘本,梦回上古,复习常见dom操作...

窗外的雨一直下,刚好得空,用dom制作一个小动画,就当复习。

简单分析一下需求,需求理清了,做起来才通顺。

首先下雨是从天上往地面掉落,所以雨滴的起始位置就是画布的顶部任意位置,掉落到画布底部后消失。每一个雨滴的长度可能略有不同,还带点角度,带角度的话下落的过程中还会有一个横向的偏移。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>rain</title>
<style>
html,
body {
width: 100%;
height: 100%;
background-color: #111;
margin: 0;
}
</style>
</head>
<body>
<div id="rain"></div>
<script type="text/javascript">
var confg = {
id: 'rain',
width: 1,
color: '#fff',
deg: 15,
opacity: 0.6
}
// 存放所有雨滴实例
var raindropArr = []
// 雨滴的构造类
function Raindrop(confg) {
this.confg = confg
// 雨滴的长度
this.height = parseInt(Math.random() * 20 + 50)
// 雨滴的初始left坐标
this.left = parseInt(Math.random() * document.body.clientWidth)
// 雨滴的初始top坐标
this.top = parseInt(Math.random() * 10 + -10)
// left的偏移值
this.offest = parseInt(Math.random() * 2 + 2)
// top的偏移值
this.speed = parseInt(Math.random() * 10 + 5)
// 创建雨滴的dom
this.el = document.createElement('div')
this.el.style.position = 'absolute'
this.el.style.width = confg.width + 'px'
this.el.style.backgroundColor = confg.color
this.el.style.transform = 'rotate(' + confg.deg + 'deg)'
this.el.style.opacity = confg.opacity
this.el.style.height = this.height + 'px'
this.el.style.left = this.left + 'px'
this.el.style.top = this.top + 'px'
// 上树
document.getElementById(this.confg.id).appendChild(this.el)
// 把雨滴的实例存起来
raindropArr.push(this)
}
// 改变雨滴的位置
Raindrop.prototype.change = function() {
this.left -= this.offest
this.top += this.speed
this.el.style.left = this.left + 'px'
this.el.style.top = this.top + 'px'
this.el.style.opacity -= 0.005
}
// 检测雨滴的top值 超出屏幕就下树
Raindrop.prototype.check = function() {
if (this.top >= document.body.clientHeight) {
document.getElementById(this.confg.id).removeChild(this.el)
// 同时删除雨滴实例
for (var i = 0; i < raindropArr.length; i++) {
if (raindropArr[i].el === this.el) {
raindropArr.splice(i, 1)
i--
}
}
}
}
// 每隔60毫秒出现一个雨滴
setInterval(function() {
new Raindrop(confg)
}, 60)
// 定时20毫秒,等于每秒50帧
setInterval(function() {
for (var i = 0; i < raindropArr.length; i++) {
raindropArr[i].change()
raindropArr[i].check()
}
}, 20)
</script>
</body>
</html>

发送
评论(0)