案例:点击按钮改变div的运动状态或样式
一、点击按钮以后使div向右移动,并且移动一定距离后停止下来
1.创建一个id为box1的div和一个控制该div向右移动的按钮并设置样式
1 | <button id="btn1">box1向右移动</button> |
1 | * { |
2.分别获取box1和btn1
1 | window.onload = function(){ |
3.定义一个变量,用来保存定时器的标识
1 | //定义一个变量,用来保存定时器的标识 |
4.为btn1绑定一个单击响应函数
1 | //为btn1绑定一个单击响应函数 |
5.开启一个定时器,用来执行动画效果
1 | //为btn1绑定一个单击响应函数 |
6.获取box1原来的left值
使box1向右移动,其实就是使它的left值增大,考虑到我们之后不仅仅要获取left值,可能还要获取到top值等,因此我们自己定义一个函数,用来获取指定元素的当前的样式。该函数接收两个参数:
- 第一个参数:obj,即要获取样式的元素
- 第二个参数:name,即要获取的样式名获取box1的原来的left值并转换为number类型
1
2
3
4
5
6
7
8
9
10
11//定义一个函数,用来获取指定元素的当前的样式
function getStyle(obj , name){
if(window.getComputedStyle){
//正常浏览器的方式,具有getComputedStyle()方法
return getComputedStyle(obj , null)[name];
}else{
//IE8的方式,没有getComputedStyle()方法
return obj.currentStyle[name];
}
}1
2//获取box1的原来的left值
var oldValue = parseInt(getStyle(box1,"left"));7.在旧值的基础上使box1的left值增加,然后将该值赋给box1
这个时候,当我们点击按钮,box1就能向右移动了,当然,在开启一个定时器的时候,需要先关闭在当前元素上的其它定时器,这样当多次点击按钮的时候,box1移动的速度才不会越来越快,因此,我们还需要加上一句代码:1
2
3
4//在旧值的基础上增加
var newValue = oldValue + 10;
//将新值赋给box1
box1.style.left = newValue + "px";1
2//关闭上一个定时器
clearInterval(timer);8.当元素移动到700px时,使其停止移动
很显然,这样写有一个问题,就是如果box1的left的值大于700,那么它不会停止,因此我们需要先做一个判断,如果box1的left值大于700,那么我们就使其等于700。1
2
3
4
5//当元素移动到700px时,使其停止执行动画
if(newValue == 700){
//达到目标,关闭定时器
clearInterval(timer);
}1
2
3
4
5
6
7
8
9
10
11//判断newValue是否大于700
if(newValue > 700){
newValue = 700;
}
//将新值赋给box1
box1.style.left = newValue + "px";
//当元素移动到800px时,使其停止移动
if(newValue === 700){
//达到目标,关闭定时器
clearInterval(timer);
}二、添加一个按钮,控制div向左移动