利用匀速动画做一个无缝轮播图(一)之匀速动画的封装
/*
需求分析:
点击按钮让一个盒子的可以实现从左到右,从右到左的移动,并且
相互之间都不影响
思路分析:
每隔一段时间位移加上一个数,和数学公式 S = VT一样
1.如果是从左至右那么位移量自身加10
2.如果是从右到左那么位移量自身减10
a.获取事件源
b.注册事件
c.事件的响应
*/
一 HTML的样式实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
//盒子的样式
div {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
}
//盒子的定位距离
#box1 {
top: 50px;
left: 100px;
}
</style>
</head>
<body>
<input type="button" value="移动到400" id="move400">
<input type="button" value="移动到800" id="move800">
<div id="box1"></div>
</body>
二 JS代码:
<script>
//匀速动画封装
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var move400 = document.getElementById('move400');
var move800 = document.getElementById('move800');
/*
需求分析:
点击按钮让两个盒子的可以移动,从左到右,从右到左都可以实现,并且
相互之间都不影响
思路分析:
每隔一段时间位移加上一个数,和数学公式 S = VT一样
*/
move400.onclick = function() {
animation(box1,400);
}
move800.onclick = function ( ) {
animation(box1,800);
}
//封装匀速动画案例
/**
* 作用实现匀速动画的效果
* @param obj 需要移动的元素对象 是一个object
* @param target 目标距离是一个number
* @return undefined
*/
function animation ( obj,target ) {
//这里清楚的是上一次的定时器
clearInterval(obj.timeID);
obj.timeID = setInterval(function ( ) {
//1.获取当前要移动元素的位置
var currentLeft = obj.offsetLeft;
//2.1 如果是从左至右那么位移加10
//2.2让每次定时器来的时候,如果是从右至左执行位减去10
//判断是从左至右,是currentLeft < target; 从右至左,是currentLeft > target
var isLeft = currentLeft < target ? true : false;
if(isLeft) { //是true是从左至右
currentLeft += 10;
}else {
currentLeft -= 10;
}
//4.边界检测,否则盒子会一直移动下去
if(isLeft? currentLeft < target : currentLeft > target) {
//3.把计算好的位置给元素的left属性
obj.style.left = currentLeft + 'px';
}else {
clearInterval(obj.timeID);
obj.style.left = target+'px';
}
},50);
}
</script>
</html>
三 关于代码的一些解释:
1.定时器setInterval是间隔一段时间不断执行的,所以,在进入定时器之前要清楚前面的定时器ID,但是在清楚定时器的时候,我们用了一个小技巧,就是给元素对象动态添加了一个属性timeID,这是对象属性的动态添加,省去了我们定义一个全局变量timeID的麻烦.那么这个timeID一直保存的是这个元素内开启定时器的ID值.
2.isLeft是一个flag,它来判断元素应该是从左至右,还是应该从右至左,因为从左至右是沿着页面的X轴正方向来移动的,他的left值是越来越大的,如果当前的currentLeft的值小于我的终点目标值target,那么应该从左到右移动,currentLeft的值应该自身加10px,反之如果当前的currentLeft的值大于我的终点目标值target,那么应该从右到左移动,currentLeft的值应该自身减10px,它是沿着页面的负方向来进行移动的.
3.最后的边界检测一定要做,因为如果不做边界检测.移动会有误差,同时也要清楚本次定时器,防止定时器紊乱.
四 最后的效果
ps:如有任何问题,请联系[email protected]