3D 特效-jQuery
2016-11-23 本文已影响0人
Lamport
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>线性</title>
</head>
<style>
</style>
<script src ="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<body>
<button id = "btn">click</button>
<script>
var timer;
var flag=false;
$(document).ready(function(){
function run(){
timer = setInterval(function(){
var oDiv = document.createElement("div");
//横向
$(oDiv).css({
"width":"100px",
"height":"100px",
"border":"1px solid #000",
"border-radius":"50px",
"position":"absolute",
"left":"0px",
"top":"300px"
});
$(oDiv).animate({
"width":"0px",
"height":"0px",
"border-radius":"0px",
"left":"200px",
"top":"350px"
},5000,function(){
oDiv.parentNode.removeChild(oDiv);
});
var oDiv1 = document.createElement("div");
$(oDiv1).css({
"width":"0",
"height":"0",
"border":"1px solid #000",
"position":"absolute",
"left":"200px",
"top":"350px"
}).delay(5000);
$(oDiv1).animate({
"width":"100px",
"height":"100px",
"border-radius":"50px",
"left":"300px",
"top":"300px"
},5000,function(){
oDiv1.parentNode.removeChild(oDiv1)
}).delay(5000);
var oDiv2 = document.createElement("div");
$(oDiv2).css({
"width":"100px",
"height":"100px",
"border":"1px solid #000",
"border-radius":"50px",
"position":"absolute",
"left":"300px",
"top":"300px"
}).delay(10000);
$(oDiv2).animate({
"width":"0px",
"height":"0px",
"border-radius":"0px",
"left":"500px",
"top":"350px"
},5000,function(){
oDiv2.parentNode.removeChild(oDiv2)
}).delay(10000);
var oDiv3 = document.createElement("div");
$(oDiv3).css({
"width":"0",
"height":"0",
"border":"1px solid #000",
"position":"absolute",
"left":"500px",
"top":"350px"
}).delay(15000);
$(oDiv3).animate({
"width":"100px",
"height":"100px",
"border-radius":"50px",
"left":"600px",
"top":"300px"
},5000,function(){
oDiv3.parentNode.removeChild(oDiv3)
}).delay(15000);
//纵向
var oDiv4 = document.createElement("div");
$(oDiv4).css({
"width":"100px",
"height":"100px",
"border":"1px solid #000",
"border-radius":"50px",
"position":"absolute",
"left":"300px",
"top":"0px"
});
$(oDiv4).animate({
"width":"0px",
"height":"0px",
"border-radius":"0px",
"left":"350px",
"top":"200px"
},5000,function(){
oDiv4.parentNode.removeChild(oDiv4);
});
var oDiv5 = document.createElement("div");
$(oDiv5).css({
"width":"0",
"height":"0",
"border":"1px solid #000",
"position":"absolute",
"left":"350px",
"top":"200px"
}).delay(5000);
$(oDiv5).animate({
"width":"100px",
"height":"100px",
"border-radius":"50px",
"left":"300px",
"top":"300px"
},5000,function(){
oDiv5.parentNode.removeChild(oDiv5)
}).delay(5000);
var oDiv6 = document.createElement("div");
$(oDiv6).css({
"width":"100px",
"height":"100px",
"border":"1px solid #000",
"border-radius":"50px",
"position":"absolute",
"left":"300px",
"top":"300px"
}).delay(10000);
$(oDiv6).animate({
"width":"0px",
"height":"0px",
"border-radius":"0px",
"left":"350px",
"top":"500px"
},5000,function(){
oDiv6.parentNode.removeChild(oDiv6)
}).delay(10000);
var oDiv7 = document.createElement("div");
$(oDiv7).css({
"width":"0",
"height":"0",
"border":"1px solid #000",
"position":"absolute",
"left":"350px",
"top":"500px"
}).delay(15000);
$(oDiv7).animate({
"width":"100px",
"height":"100px",
"border-radius":"50px",
"left":"300px",
"top":"600px"
},5000,function(){
oDiv7.parentNode.removeChild(oDiv7)
}).delay(15000);
$(document.body).append(oDiv);
$(document.body).append(oDiv1);
$(document.body).append(oDiv2);
$(document.body).append(oDiv3);
$(document.body).append(oDiv4);
$(document.body).append(oDiv5);
$(document.body).append(oDiv6);
$(document.body).append(oDiv7);
},200);
};
$("#btn").click(function(){
if(flag){
clearInterval(timer);
flag = false;
}else{
run();
flag = true;
};
});
});
</script>
</body>
</html>
