JS---封装缓动(变速)动画函数---增加多个任意多个属性
2024-08-23 21:32:03
封装缓动动画函数---增加多个任意多个属性
在原来缓动动画函数,增加任意一个属性的基础上,做了如下改变
1. 原来function animate(element, attr, target),三个变量,改为用json对象来装一对:属性:目标位置的值,变为function animate(element, json)
2. 之前的变速动画函数,都任意一个属性,改变其当前属性的位置,到达目标属性。现在有多个任意属性,用json对象装,所以要遍历json对象里面每一个值 for(var key in json){}, key就是这里的attr, 所以遍历的for(var attr in json)
3. 当前属性对应的目标值,var target就是json里面值的目标,var target=json[attr];
4. 添加了flag的判断,是为了,保证在json中所有的值都到达目的位置后,再清除定时器
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
} div {
margin-top: 30px;
width: 200px;
height: 100px;
background-color: green;
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.currentSytle[attr] || 0;
} function animate(element, json) {
clearInterval(element.timeId);
element.timeId = setInterval(function () {
var flag = true; //默认,假设,全部到达目标
for (var attr in json) {
//获取元素这个属性的当前的值
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);
}
//测试代码
console.log("目标:" + target + ",当前" + current + ",每次移动的步数" + step);
}, 20)
} my$("btn1").onclick = function () {
animate(my$("dv"), { "width": 400, "height": 200, "left": 500, "top": 80 })
}; </script>
</body> </html>
效果如下:
最新文章
- Linux中的入口函数main
- C#编程总结(十)字符转码
- MVC 微信支付
- Mongoose 框架初学使用记录
- 打包Android:Error building Player: CommandInvokationFailure
- windows2008 RDP修改默认端口
- py2exe把python程序转换exe
- 《Programming WPF》翻译 第9章 2.选择一个基类
- drupal 开发简单站点流程
- Python——cmd调用(os.system阻塞处理)
- 使用SQL语句在SQL server2017上创建数据库
- mssql sqlserver 不固定行转列数据(动态列)
- [Swift]LeetCode22. 括号生成 | Generate Parentheses
- SpringCloud使用Nacos服务发现实现远程调用
- LinkedHashMap和TreeMap的有序性
- 搭建私有仓库Harbor
- 1、Nginx集群tomcat
- github上传本地仓库
- netcore 发布 到 windows server IIS
- 全网最详细的HBase启动以后,HMaster进程启动了,几秒钟以后自动关闭问题的解决办法(图文详解)