<html>
<head>
<title>上下左右移动</title>
<style>
#div1 {
position: absolute;
border: 1px solid black;
width: 50px;
height: 50px;
left: 0px;
top: 100px;
}
#div2 {
position: absolute;
border: 1px solid black;
width: 50px;
height: 50px;
right: 0px;
top: 100px;
}
#div3 {
position: absolute;
border: solid 1px black;
width: 50px;
height: 50px;
left: 20px;
bottom:0px;
}
#div4 {
position: absolute;
border: solid 1px black;
width: 50px;
height: 50px;
right: 20px;
top: 0px;
}
</style>
<script>
var timer1 = null;
function moveItRight(val) {
var el = document.getElementById("div1");
if (parseInt(el.style.left) > (val))
el.style.left = 0;
el.style.left = parseInt(el.style.left) + 2 + 'px';
timer1 = setTimeout(moveItRight, 25, 200); // 在指定的毫秒数后调用函数
}
function moveItLeft(val) {
var el = document.getElementById("div2");
if (parseInt(el.style.right) > (val))
el.style.right = 0;
el.style.right = parseInt(el.style.right) + 2 + 'px';
timer1 = setTimeout(moveItLeft, 25, 200); // 在指定的毫秒数后调用函数
}
function moveItUp(val) {
var el = document.getElementById("div3");
if (parseInt(el.style.bottom) > (val))
el.style.bottom = 0;
el.style.bottom = parseInt(el.style.bottom) + 2 + 'px';
timer1 = setTimeout(moveItUp, 25, 200); // 在指定的毫秒数后调用函数
}
function moveItDown(val) {
var el = document.getElementById("div4");
if (parseInt(el.style.top) > (val))
el.style.top = 0;
el.style.top = parseInt(el.style.top) + 2 + 'px';
timer1 = setTimeout(moveItDown, 25, 200); // 在指定的毫秒数后调用函数
}
window.onload = function () {
document.getElementById("div1").style.left = 0;
moveItRight(200);
document.getElementById("div2").style.right = 0;
moveItLeft(200);
document.getElementById("div3").style.bottom = 0;
moveItUp(200);
document.getElementById("div4").style.top = 0;
moveItDown(200);
}
</script>
</head>
<body>
<div id="div1" style="top:323;bottom"> Move left! </div>
<div id="div2"> Move right! </div>
<div id="div3">Move up!</div>
<div id="div4">Move down!</div>
</body>
</html>
div重复移动
最新推荐文章于 2022-05-07 15:42:55 发布