JS---封装缓动（变速）动画函数---增加任意一个属性
程序员文章站
2022-05-22 21:57:04
封装缓动(变速)动画 增加任意一个属性 1. 本来的变速动画函数，是获取特定的属性(之前案例是向右移动，所以获取的是left属性) 2. 现在改变为，获取任意一个属性，使其移动到指定的target，相当于在原animate(element,target)函数上，增加了一个属性，变为animate(e ......
封装缓动(变速)动画---增加任意一个属性
1. 本来的变速动画函数，是获取特定的属性(之前案例是向右移动，所以获取的是left属性)
2. 现在改变为，获取任意一个属性，使其移动到指定的target，相当于在原animate(element,target)函数上，增加了一个属性，变为animate(element, attr, target)函数
3. 改动一：在获取当前元素的位置，var current，用getstyle来获取，因为得到的是字符串类型，包一个parseint改为数字类型；
4. 改动二：移动步数时候，元素的当前位置等于current+"px"，element.style.left更新为element.style[attr], 特定的元素用任意元素取代
获得的效果：就是可以使任意元素的，任意一个样式属性，移动到指定的目标位置
attr位置，可以改为left，可以改为heigth, 可以改为top，可以改为bgc....等等
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
margin-top: 20px;
width: 200px;
height: 100px;
background-color: green;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1" />
<input type="button" value="移动到800px" id="btn2" />
<div id="dv">
<script src="common.js"></script>
<script>
//点击按钮移动div
my$("btn1").onclick = function () {
//获取div此时left的当前位置,达到目标400
// animate(my$("dv"),"left",400);
//获取div此时的宽度,达到目标200
animate(my$("dv"), "width", 200);
};
//获取任意的一个属性的当前的属性值: 改用之前封装的getstyle函数
function getstyle(element, attr) {
//判断浏览器是否支持这个方法
return window.getcomputedstyle ? window.getcomputedstyle(element, null)[attr] : element.currentstyle[attr];
}
//匀速动画
//element---元素
//attr---属性名字
//target---目标位置
function animate(element, attr, target) {
//清理定时器
clearinterval(element.timeid);
element.timeid = setinterval(function () {
//获取元素的当前位置
var current = parseint(getstyle(element, 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) {
//清理定时器
clearinterval(element.timeid);
}
//测试代码:
console.log("目标位置:" + target + ",当前位置:" + current + ",每次移动步数:" + step);
}, 20);
}
</script>
</div>
</body>
</html>
上一篇： 郑和为什么要下西洋？一开始的目的是什么？
下一篇： Mysql被黑客入侵及安全措施总结