1.效果图
2.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js树叶飘落</title>
</head>
<style type="text/css">
body {
overflow: hidden;
background-image: url(img/autumn.jpg);
background-size: cover;
}
</style>
<body>
<script type="text/javascript">
//pre.getRandom
function getRandom(x, y) {
return Math.random() * (y - x) + x;
}
// 1,写一个函数,在可视区域内,随机大小,随机位置,产生n个雪花
function createSnows(n) {
for (var i = 0; i < n; i++) {
var img = document.createElement('img');
img.src = 'shuye.png';
//随机
//1, size 30-60
//定宽不定高,定高不定宽
var size = getRandom(20, 40);
img.style.width = size + 'px';
// 2,Position
img.style.position = 'absolute';
//需要记录每个元素的初始left值
var left = getRandom(0, window.innerWidth);
leftArr[i] = left;
img.style.left = left + 'px';
img.style.top = getRandom(0, window.innerHeight) + 'px';
// 神仙气质
img.style.opacity = getRandom(0.4, 1);
weightArr[i] = getRandom(0,6.28);
document.body.appendChild(img);
}
}
// 2让雪花运动
// 运动函数让所有雪花运动
function snowRun() {
// 1.获取所有元素
// document.getElementsByClassName()
// document.getElementsByTagName()
var imgs = document.getElementsByTagName('img');
// 2,遍历元素,让每个元素运动
setInterval(function() {
for (var i = 0; i < imgs.length; i++) {
//每一个元素
var img = imgs[i];
var top = parseInt(getComputedStyle(img).top);
// var left = leftArr[i];
top++;
img.style.top = top + 'px';
var left = leftArr[i] + Math .sin(top*0.01 - weightArr[i])*100;
img.style.left = left + 'px';
//废物利用,到地下的元素在放到上面
if (top >= window.innerHeight) {
img.style.top =-parseInt(getComputedStyle(img).height)+ 1 + 'px';
//左右位置重新生成
var left = getRandom(0,window.innerWidth);
leftArr[i] = left;
img.style.left = left + 'px';
}
}
},1);
}
var leftArr = [];
//偏移量数组 左加右减
var weightArr = [];
createSnows(100);
snowRun();
</script>
</body>
</html>
记录每一个前端小案例!!!!