自定义样式中的任意属性值的变化的函数封装
1.定义一个函数名
function moveStyles(element,obj){}
其中有三个形参分别是,element对象,obj对象。
2.编写函数体的一个大概思路
function moveStyles(element,obj,fn){
//设置一个定时器
element.way = setInterval(function(){
//设置一个开关使得样式都能够到达目标位置
var flag = true;
//第一步先获取目标属性的值 target 是你的样式名 类型为字符串
var value = window.getComputedStyle(element,null)[target];
//但因为value的数据类型是一个字符串,所以要对其取整。
value = parseInt(value);
//第二步获取你的目标值
var aim = obj[target];
//第三步获取你每次移动的步数,这是为了达到变速移动的效果
var step = (aim - value)/10;
//当你的step是小数的时候需要对其取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
value += step
//将第一次的移动距离给你的目标样式,如果是像素的话就要加上字符串 "px"
element.style[target] = value + "px";
//进行判断
if(value != aim){
//将我的开关关闭
flag = false ;
}
if(false){
clearInterval(element.way);
}
},10);
}
- 完整的变速移动函数封装
// style是我传输的一个对象。
//{
"width" : 100, //100为我的目标值
"top" : 20 //20是我的top的目标值
//}
function moveStyles(element,style){
clearInterval(element.way);
element.way = setInterval(function(){
// 定义一个开关,在循环开始的时候就将flag的值设置为true
var flag = true;
for(var key in style){
//目标位置
var move_x =style[key];
// 当前位置
var now = parseInt(getStyle(element,key));
var step = (move_x - now)/10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
now += step;
// 移动
element.style[key] = now+"px";
}
if(now != move_x){
//此时的flag是一个全局变量当没有到达目标位置时就会将flag设置为flase.
flag = false;
}
}
if(flag){
clearInterval(element.way);
}
}
//每 10 毫秒就会执行一次定时,就是将flag的值设置为true
},10)
}