JS---最终版本--封装缓动（变速）动画函数---增加任意多个属性&回调函数&层级&透明度
程序员文章站
2022-05-31 22:09:57
封装缓动（变速）动画函数 增加任意多个属性&回调函数&层级&透明度 相较之前的，增加了2个判断，第一个判断是不是透明度，第二个判断是不是zindex, 都不是，就只是普通属性和之前一样
封装缓动（变速）动画函数---增加任意多个属性&回调函数&层级&透明度
相较之前的，增加了2个判断，第一个判断是不是透明度，第二个判断是不是zindex, 都不是，就只是普通属性和之前一样
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 100px;
background-color: green;
position: absolute;
left: 0;
top: 0;
}
input {
z-index: 10;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<div id="dv">
</div>
<script src="common.js"></script>
<script>
//点击按钮,改变宽度到达一个目标值,高度到达一个目标值
//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
function getstyle(element, attr) {
return window.getcomputedstyle ? window.getcomputedstyle(element, null)[attr] : element.currentstyle[attr] || 0;
}
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);
}
//zindex:1000
//透明度: 数字类型----小数---放大100倍
my$("btn1").onclick = function () {
var json1 = {"width": 400, "height": 500, "left": 500, "top": 80, "opacity": 0.2};
animate(my$("dv"), json1, function () {
animate(my$("dv"), {"width": 40, "height": 50, "left": 0, "top": 0, "opacity": 1, "zindex": 1000});
});
};
</script>
</body>
</html>