//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
function getStyle(element, attr) {
return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
}
//动画函数 obj---要执行动画的对象 json---要执行到的目标的参数对象 fn为执行完成后的回调函数(可以再次调用此方法按照上面格式传参--顺序执行多个动画)
//调用例： //zIndex:1000
//透明度opacity: 数字类型----小数---放大100倍
// my$("btn1").onclick = function () {
// var json1 = {"width": 400, "height": 500, "left": 500, "top": 80, "opacity": 0.2};
// animate(my$("dv"), json1, function () {
//var json2={"width": 40, "height": 50, "left": 0, "top": 0, "opacity": 1, "zIndex": 1000}
// animate(my$("dv"),json2,function(){按照此格式多次重复添加动画将会顺序执行} );
// });
// };
function animate(element, json, fn) {
clearInterval(element.timeId);//清理定时器
//定时器,返回的是定时器的id
element.timeId = setInterval(function () {
var flag = true;//默认,假设,全部到达目标
//遍历json对象中的每个属性还有属性对应的目标值
for (var attr in json) {
//判断这个属性attr中是不是opacity
if (attr == "opacity") {
//获取元素的当前的透明度,当前的透明度放大100倍
var current = getStyle(element, attr) * 100;
//目标的透明度放大100倍
var target = json[attr] * 100;
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;//移动后的值
element.style[attr] = current / 100;
} else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex
//层级改变就是直接改变这个属性的值
element.style[attr] = json[attr];
} else {
//普通的属性
//获取元素这个属性的当前的值
var current = parseInt(getStyle(element, attr));
//当前的属性对应的目标值
var target = json[attr];
//移动的步数
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;//移动后的值
element.style[attr] = current + "px";
}
//是否到达目标
if (current != target) {
flag = false;
}
}
if (flag) {
//清理定时器
clearInterval(element.timeId);
//所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数
if (fn) {
fn();
}
}
//测试代码
console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step);
}, 20);
}
658
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
