前端开发者| 前端代码开发工具免费 |
| html5前端开发工具 拖拽 |
| 谷歌浏览器的前端开发工具 |
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>线性</title>
</head>
<style>
</style>
<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>
| wps前端开发工具 |
| 前端界面开发工具 |
| 前端h5游戏开发工具 |
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册