<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
position: absolute;
left: 0;
}
</style>
<script type="text/javascript">
window.onload=function(){
// 获取box1
var box1=document.getElementById("box1");
// 获取btn01
var btn01=document.getElementById("btn01");
// 定义一个变量，用来保存定时器的标识
var timer;
// 点击按钮以后，使box1向右移动（left值增大）
btn01.onclick=function(){
// box1.style.left="200px";//点击按钮 向右移动200px
// 关闭上一个定时器
clearInterval(timer);
// 开启一个定时器，用来执行动画效果
timer = setInterval(function(){
// 获取box1的原来的left值
var oldValue = parseInt(getStyle(box1, "left"));
// 在旧值的基础上增加
var newValue=oldValue+1;
// 判断newValue是否大于800
if(newValue>800){
newValue=800;
}
// 将新值设置给box1
box1.style.left=newValue+"px";
// 当元素移动到800px时，使其停止执行动画
if(newValue == 800){
// 达到目标，关闭定时器
clearInterval(timer);
}
}, 30);
};
};
/*
定义一个函数，用来获取指定元素的当前的样式
参数：
obj 要获取样式的元素
name 要获取的样式名
*/
function getStyle(obj, name) {
if (window.getComputedStyle) {
// 正常浏览器的方式,具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
} else {
// IE8的方式,没有getComputedStyle()方法
return obj.currentStyle[name];
}
// return window.getComputedStyle? getComputedStyle(obj, null)[name]: obj.currentStyle[name];
}
</script>
</head>
<body>
<button id="btn01">点击按钮以后box1向右移动</button>
<br/><br/>
<div id="box1"></div>
<div style="width:0;height:1000px;border-left:1px black solid; position:absolute;left:800px;top:0;"></div>
</body>
</html>
