封装一个运动框架的函数,可以实现某个元素以某种速度,往某个方向的移动
代码:
/***
* 先封装一个获取元素样式的函数,用于获取非行间样式
* 考虑到IE的兼容性问题所以需要封装此函数
* @param obj 获取页面中具体的某一个元素 例如,p,div,li...
* @param attr 自定义的属性名,表示的是上面的obj元素中的具体的某一个属性
* 例如:width、height、top、left....
*/
function getStyle(obj,attr){
if(obj.currentStyle){
//IE低版本
return obj.currenStyle[attr];
}else{
//标准浏览器
return getComputedStyle(obj)[attr];
}
}
/***
* 封装一个运动框架函数
* @param obj 具体运动的是哪一个元素,例如:div、p、ul...
* @param attr 具体的某一种属性 例如:top、left、opacity。。。
* @param step 运动的步长
* @param target 运动的目标值
*/
var timer = null ;
function move(obj,tag,step,target){
//先清除之前的定时器,清楚产出的id值
clearInterval(timer);
//判断运动的方向
step = target > parseInt(getStyle(obj,attr)) ? step : -step ;
//定时器
timer = setInterval(function(){
//初始位置 + 运动步长 = 运动过程
var left = parseInt(getStyle(obj,attr)) + step ;
//判断到达目标值时停止运动
if(left >= target && step > 0 || left <= arget && step < 0){
left = target ;
//停止计时器
clearInterval(timer) ;
}
obj.style[attr] = left + "px" ;
},20)
}