<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.conti{
width: 800px;
height: 600px;
background-color: #e4393c;
margin: 10px auto;
}
.btn{
display: block;
margin: 0 auto;
border: none;
width: 100px;
height: 30px;
}
</style>
</head>
<body>
<div class="conti">
</div>
<button class="btn" onclick="btnClick()">点击</button>
</body>
<script type="text/javascript">
function initImages() {
var container = document.getElementsByClassName("conti")[0];
for (var i = 0; i < 50; i++){
var div = document.createElement("div");
div.setAttribute("class", "image");
div.style.float = "left";
div.style.backgroundColor = bg1();
div.style.width = "80px";
div.style.height = "80px";
container.appendChild(div);
}
}
// 动画函数: 动画对象(对象) 转换时间(属性值) 动画(函数) 回调(函数)
function motion(obj, time, dofn, callback) {
obj.style.transition = time;
dofn.call(obj);
obj.addEventListener("transitionend", function () {
callback.call(obj);
}, false)
}
function bg1(){
return '#'+Math.floor(Math.random()*0xffffff).toString(16);
}
initImages();
function btnClick() {
var divs = document.getElementsByClassName("image");
for (var i = 0; i<divs.length; i++){
var div = divs[i];
motion(div, "1s", function () {
div.style.transform = "scale(0)";
}, function () {
console.log("完毕");
});
}
}
</script>
</html>
网友评论