运动模块的最终版
//封装getScroll函数
//获取浏览器向上滚动的距离
function getScroll(obj) {
obj = {
left:window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft,
top:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0
};
return obj;
}
//获取元素的样式属性
function getStyle(ele,attr) {
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}else{
return ele.currentStyle[attr];
}
}
function animateHandle(ele,json,fn) {
let current,target;
clearInterval(ele.timer);
ele.timer = setInterval(function () {
let flag = true;//设置一个标志位,假设全部到达目标
for(let attr in json){
if(attr === 'opacity'){
//获取当前元素的透明度
let current = getStyle(ele,attr)*100;
//目标的透明度放大100倍
target = json[attr]*100;
let step = (target-current)/10;
step = step>0?Math.ceil(step):Math.floor(step);
current += step;
ele.style[attr] = current/100;
}else if(attr === 'zIndex'){
ele.style[attr] = json[attr];
}else{
//如果为普通属性
current = parseInt(getStyle(ele,attr));
//获取当前属性对应的目标值
target = json[attr];
let step = (target-current)/10;
step = step>0?Math.ceil(step):Math.floor(step);
current += step;
ele.style[attr] = current+'px';
}
//判断是否到达目标
if(current!=target){ //未到达目标
flag = false; //不进行清理定时器
}
}
if(flag){ //到达目标,进行清理
clearInterval(ele.timer);
if(fn){
fn();//调用回调函数
}
}
})
}
let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
let dv = document.getElementById('dv');
btn1.onclick = function () {
animateHandle(dv,{left:400,top:500,opacity:"0.4"},function(){
animateHandle(dv,{left:20,top:100,opacity:'0.9'})
})
}
btn2.onclick = function () {
animateHandle(dv,{left:800,top:600,opacity:"0.2"},function(){
animateHandle(dv,{left:20,top:100,opacity:'0.9'})
})
}