首先我们需要动画效果如下:
function animate(ele, obj,callback) {
for (let attr in obj) {
//ele是获取的标签名(div),attr获取的是属性值(left),l就是标签名的属性值(div.left)
let l = getStyle(ele, attr)
//获取初始位置
// console.log(ele,attr);
l = parseInt(l)
console.log(l);
//获取目标位置
let target = obj[attr]
//步长公示
let steep = (target - l) / 10
//大于0 取大;小于0 取小
steep = steep>0?Math.ceil(steep):Math.floor(steep)
let timer = setInterval(function () {
l += steep
if (l === target) {
l = target
clearTimeout(timer)
//回调函数在定时器结束的时候运行
if(callback){
callback()
}
}
ele.style[attr]=l+'px'
},30)
}
}
制作的步骤是:
先在页面中放上提前准备的大树的枝干
鼠标点击大盒子,随机生成若干个小div,给他们放到随机的位置,并添加上背景图片
然后利用动画效果,改变他们的top值,使小div降落
css样式:
aside {
width: 1000px;
height: 700px;
margin: 0 auto;
/* background: chartreuse; */
background: url(images/未标题-2.png) no-repeat;
background-size: 60%;
background-position-x: 45%;
position: relative;
}
html:
<aside>
</aside>
js:
//获取样式函数
function setStyle(ele, styleObj) {
for (var attr in styleObj) {
ele.style[attr] = styleObj[attr]
}
}
//随机数函数
function getRandom(a, b = 0) {
var max = a
var min = b
if (a < b) {
max = b
min = a
}
return Math.floor(Math.random() * (max - min)) + min
}
//随机颜色函数
function setColor() {
var color = '#'
for (var i = 0; i < 2; i++) {
var hex = this.getRandom(256).toString(16)
hex = hex.length ? '0' + hex : hex
color += hex
}
return color
}
//获取元素
var aside = document.querySelector('aside')
//鼠标点击大盒子
aside.addEventListener('click', function (e) {
//循环创建小div
for (var i = 0; i < getRandom(800); i++) {
var div = document.createElement('div')
//给每一个小的div创建上类名
div.className = 'flower'
//利用样式函数添加样式,大小 背景图 定位(必需添加定位,不然动画是不会动的,)
setStyle(div, {
width: '40px',
height: '40px',
backgroundImage: " url(images/21.png)",
backgroundSize: '100%',
position: 'absolute',
//小div的位置是随机放的
left: getRandom(750, 150) + 'px',
top: getRandom(12, 487) + 'px'
})
//将每一个小div放进大盒子里面
aside.appendChild(div)
}
//获取这个集合
var divs = document.querySelectorAll('.flower')
for (let j = 0; j < divs.length; j++) {
//给每一个都绑定动画事件
animate(divs[j], {
top: 600
}, function () {
//这是一个回调函数,所有的小盒子动画事件结束之后就会执行下面函数,
//动画函数执行完毕之后,清除小div
aside.removeChild(divs[j])
})
}
})