Open goldEli opened 4 years ago
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>物体移动</title>
<style>
body{
position: relative;
}
.box{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
left: 1;
}
</style>
</head>
<body>
<div id="js-box" class="box"></div>
<script>
//方法1 通过设置box中的初始值
var div = document.getElementById('js-box');
var length = 1;
if(isNaN(parseInt(div.style.left))){
div.style.left="0px";
}
var timer = setInterval(function(){
div.style.left = parseInt(div.style.left) + length + 'px';
if(parseInt(div.style.left) > 500 || parseInt(div.style.left) <=0){
length *= -1;
}
}, 1);
//方法2 通过获取box中的内部样式
var div = document.getElementById("js-box");
all_style = window.getComputedStyle(div,null);
var length = 1;
var timer1 = setInterval(function(){
div.style.left = parseInt(all_style.left) + length + 'px';
if(parseInt(div.style.left) > 500 || parseInt(div.style.left) <=0){
length *= -1;
}
}, 1);
</script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>物体移动</title>
<style>
body{
position: relative;
}
.box{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="js-box" class="box"></div>
<script>
var direction = 1;
var box = document.getElementById("js-box");
var timer = setInterval(function() {
var currentPosition = box.offsetLeft;
if(direction > 0){
var nextPosition = currentPosition + 2;
box.style.left = nextPosition + "px";
}else {
var nextPosition = currentPosition - 2;
box.style.left = nextPosition + "px";
}
if(box.offsetLeft > 1200){
direction = 0;
}else if(box.offsetLeft < 10){
direction = 1;
}
},8);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>物体移动</title>
<style>
body{
position: relative;
}
.box{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div id="js-box" class="box"></div>
<script>
var box_move = window.setInterval(move,200);
var count = 0;
var step = -50;
function move(){
var js_box = document.getElementById("js-box");
if(count%6 == 0){
step = -step;
}
current_left = js_box.offsetLeft + step;
js_box.style.left = current_left + "px";
count++;
}
</script>
</body>
</html>
一般每秒30针就可以骗过人眼,人眼就可以把一张张滚动的图看成动画
用js实现物体往复运动,具体效果如下:
完善以下代码