<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下雨特效</title>
<script src="jquery.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
}
.bigbox {
width: 100vw;
height: 100vh;
background: url(imagess3/name.jpeg) center no-repeat;
background-size: cover;
}
.rainbox {
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
pointer-events: none;
}
.rain {
position: absolute;
top: 0px;
width: 2px;
height: 50px;
background: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .6));
}
</style>
</head>
<body>
<div class="bigbox">
</div>
<div class="rainbox">
</div>
<script>
const box = document.querySelector(".rainbox");
var boxwidth = box.clientWidth;
var boxheight = box.clientWidth;
// 每次页面的宽高变化时，盒子的宽高也发生变化
$(window).resize(function() {
boxwidth = box.clientWidth;
boxheight = box.clientHeight;
// console.log(boxwidth);
// console.log(boxheight);
// 这里使用了原生js的方法来获取box的宽度
})
// 每隔一段时间添加一些雨滴
setInterval(() => {
const rain = $("<div></div>").addClass("rain");
// 新建一个元素div并加上类名rain
// 随机刷新雨点的位置，随机生成透明度
$(rain).css({
"left": Math.random() * boxwidth + 'px',
"opacity": Math.random(),
});
$(".rainbox").append(rain);
// 将rain添加到rainbox中
// 定义一个定时器，让雨点下落，并且当rain的top的值大于盒子的宽度时，
//就将rain删除
var race = 1;
// 现在外面的定时器中设置一个race使其等于1
const timer = setInterval(() => {
if (parseInt($(rain).css("top")) >= boxheight) {
clearInterval(timer);
$(rain).remove();
// 如果top值大于了boxheight就清除自身
}
race++;
// 然后race在内部定时器中随着里面定时器设置的时间自增一
// console.log(race);
$(rain).css({
"top": parseInt($(rain).css("top")) + race + 'px'
})
}, 20)
}, 20)
</script>
</body>
</html>
评论0