点击按钮div向右移动
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<style>
* {
margin: 0;
padding: 0;
}
#box1 {
width: 100px;
height: 100px;
background-color: salmon;
position: absolute;
left:0;/* 为使用IE做准备 */
}
</style>
<script>
// 根据元素的样式名获取样式值
function getStyle(obj, name) {
if (window.getComputedStyle) {
// 正常浏览器
return getComputedStyle(obj, null)[name];
// IE8
} else {
return obj.currentStrly[name];
}
}
window.onload = function () {
var box1 = document.getElementById("box1");
var btn = document.getElementById("btn");
var timer;
btn.onclick = function () {
clearInterval(timer);
// 开启定时器执行动态效果
timer = setInterval(function () {
var left = parseInt(getStyle(box1,"left"));
left = left +10;
if(left > 800)//为了使能停在800px那条线上
left = 800;
box1.style.left = left + "px";
if(left == 800)
clearInterval(timer);
}, 30);
};
};
</script>
</head>
<body>
<button id="btn">点击按钮,向右移动</button>
<br /><br />
<div id="box1"></div>
</body>
</html>
div向左移动
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<style>
* {
margin: 0;
padding: 0;
}
#box1 {
width: 100px;
height: 100px;
background-color: salmon;
position: absolute;
left:0;/* 为使用IE做准备 */
}
</style>
<script>
// 根据元素的样式名获取样式值
function getStyle(obj, name) {
if (window.getComputedStyle) {
// 正常浏览器
return getComputedStyle(obj, null)[name];
// IE8
} else {
return obj.currentStrly[name];
}
}
window.onload = function () {
var box1 = document.getElementById("box1");
var btn = document.getElementById("btn");
var btn2 =document.getElementById("btn2");
var timer;
btn.onclick = function () {
clearInterval(timer);
// 开启定时器执行动态效果
timer = setInterval(function () {
var left = parseInt(getStyle(box1,"left"));
left = left +10;
if(left > 800)//为了使能停在800px那条线上
left = 800;
box1.style.left = left + "px";
if(left == 800)
clearInterval(timer);
}, 30);
};
btn2.onclick = function () {
clearInterval(timer);
// 开启定时器执行动态效果
timer = setInterval(function () {
var left = parseInt(getStyle(box1,"left"));
left = left -10;
if(left < 0)//为了使能停在800px那条线上
left = 0;
box1.style.left = left + "px";
if(left == 0)
clearInterval(timer);
}, 30);
};
};
</script>
</head>
<body>
<button id="btn">点击按钮,向右移动</button>
<button id="btn2">点击按钮,向左移动</button>
<br /><br />
<div id="box1"></div>
</body>
</html>
优化写法:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<style>
* {
margin: 0;
padding: 0;
}
#box1 {
width: 100px;
height: 100px;
background-color: salmon;
position: absolute;
left:0;/* 为使用IE做准备 */
}
</style>
<script>
// 根据元素的样式名获取样式值
function getStyle(obj, name) {
if (window.getComputedStyle) {
// 正常浏览器
return getComputedStyle(obj, null)[name];
// IE8
} else {
return obj.currentStrly[name];
}
}
// speed<0向左移动
// speed>0向右移动
var timer;
function move(obj,target,speed){
clearInterval(timer);
var current = parseInt(getStyle(obj,"left"));
if(target < current){
speed = -speed;
}
// 开启定时器执行动态效果
timer = setInterval(function () {
var left = parseInt(getStyle(obj,"left"));
left = left + speed;
if(speed<0&&left<target || speed>0&&left>target){
left = target;
}
obj.style.left = left + "px";
if(left == target)
clearInterval(timer);
}, 30);
}
window.onload = function () {
var box1 = document.getElementById("box1");
var btn = document.getElementById("btn");
var btn2 =document.getElementById("btn2");
btn.onclick =function(){
move(box1, 800 ,10);
};
btn2.onclick = function(){
move(box1, 0 ,10);
};
};
</script>
</head>
<body>
<button id="btn">点击按钮,向右移动</button>
<button id="btn2">点击按钮,向左移动</button>
<br /><br />
<div id="box1"></div>
</body>
</html>
问题:一个对象应该拿着一个定时器,所以定时器不能设置为全局变量。
向执行动画的对象中添加一个timer属性,用来保存它自己的定时器的标识。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<style>
* {
margin: 0;
padding: 0;
}
#box1 {
width: 100px;
height: 100px;
background-color: salmon;
position: absolute;
left:0;/* 为使用IE做准备 */
}
#box2 {
width: 100px;
height: 100px;
background-color:rgb(236, 236, 166);
position: absolute;
left:0;/* 为使用IE做准备 */
top:200px;
}
</style>
<script>
// 根据元素的样式名获取样式值
function getStyle(obj, name) {
if (window.getComputedStyle) {
// 正常浏览器
return getComputedStyle(obj, null)[name];
// IE8
} else {
return obj.currentStrly[name];
}
}
// speed<0向左移动
// speed>0向右移动
var timer;
function move(obj,target,speed){
clearInterval(obj.timer);
var current = parseInt(getStyle(obj,"left"));
if(target < current){
speed = -speed;
}
// 开启定时器执行动态效果
obj.timer = setInterval(function () {
var left = parseInt(getStyle(obj,"left"));
left = left + speed;
if(speed<0&&left<target || speed>0&&left>target){
left = target;
}
obj.style.left = left + "px";
if(left == target)
clearInterval(obj.timer);
}, 30);
}
window.onload = function () {
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var btn = document.getElementById("btn");
var btn2 =document.getElementById("btn2");
var btn3 =document.getElementById("btn3");
var btn4 =document.getElementById("btn4");
btn.onclick =function(){
move(box1, 800 ,20);
};
btn2.onclick = function(){
move(box1, 0 ,10);
};
btn3.onclick = function(){
move(box2, 800 ,10);
};
btn4.onclick = function(){
move(box2, 0 ,10);
};
};
</script>
</head>
<body>
<button id="btn">点击按钮,box1向右移动</button>
<button id="btn2">点击按钮,box1向左移动</button>
<br><br>
<button id="btn3">点击按钮,box2向右移动</button>
<button id="btn4">点击按钮,box2向左移动</button>
<br /><br />
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
改进:更灵活地移动:上下左右
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<style>
* {
margin: 0;
padding: 0;
}
#box1 {
width: 100px;
height: 100px;
background-color: salmon;
position: absolute;
left:0;/* 为使用IE做准备 */
}
#box2 {
width: 100px;
height: 100px;
background-color:rgb(236, 236, 166);
position: absolute;
left:0;/* 为使用IE做准备 */
top:200px;
}
</style>
<script>
// 根据元素的样式名获取样式值
function getStyle(obj, name) {
if (window.getComputedStyle) {
// 正常浏览器
return getComputedStyle(obj, null)[name];
// IE8
} else {
return obj.currentStrly[name];
}
}
// 对象
// speed<0向左移动
// speed>0向右移动
// target目的地
// attr:要执行动画的样式:left,top,width
// callback:回调函数中再嵌套回调函数,可以添加样式效果
function move(obj,attr,target,speed,callback){
clearInterval(obj.timer);
var current = parseInt(getStyle(obj,attr));
if(target < current){
speed = -speed;
}
// 开启定时器执行动态效果
obj.timer = setInterval(function () {
var oldValue = parseInt(getStyle(obj,attr));
newValue = oldValue + speed;
if(speed<0&&newValue<target || speed>0&&newValue>target){
newValue = target;
}
// attr是变量需要使用[]获取
obj.style[attr] = newValue + "px";
if(newValue == target){
clearInterval(obj.timer);
callback && callback();
}
}, 30);
}
window.onload = function () {
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var btn = document.getElementById("btn");
var btn2 =document.getElementById("btn2");
var btn3 =document.getElementById("btn3");
var btn4 =document.getElementById("btn4");
var btn5 =document.getElementById("btn5");
var btn6 =document.getElementById("btn6");
btn.onclick =function(){
move(box1, "left", 800 ,20);
};
btn2.onclick = function(){
move(box1,"left", 0 ,10);
};
btn3.onclick = function(){
move(box2,"left", 800 ,10);
};
btn4.onclick = function(){
move(box2,"left", 0 ,10);
};
btn5.onclick = function(){
move(box2,"width", 800 ,10);
};
btn6.onclick = function(){
move(box2,"height", 200 ,10,function(){
move(box2,"width", 800 ,10,function(){
move(box2,"top", 0 ,10,function(){
});
});
});
};
};
</script>
</head>
<body>
<button id="btn">点击按钮,box1向右移动</button>
<button id="btn2">点击按钮,box1向左移动</button>
<button id="btn3">点击按钮,box2向右移动</button>
<button id="btn4">点击按钮,box2向左移动</button>
<button id="btn5">点击按钮,box2变宽</button>
<button id="btn6">点击按钮,box2改变</button>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>