JavaScript运动框架 多值运动(四)
作者：GY_U_YG 时间：2023-09-08 01:44:51
多值运动，也就是对于某个对象来说，不仅仅只是其中一个属性值在变化，而是好多个，比如宽，高，字体，透明度等等同时变化
当然了，多值运动会产生一个问题，就是定时器何时关闭的问题！当然是所有的属性值都运动到目标值了才能清理定时器，也就是等最慢的。就好比十个人一起聚餐，不能等到来一个人就开吃！
前几篇讲的都是一个元素对象中某一个属性的运动，这次讲同一个元素对象中多个属性值的缓冲运动，那么每个属性都有个终点（目标点），我们把这些属性及其目标值写成一个对象的形式，或者是json状！容易产生的问题就是上面说的，这里用了共同的速度函数，但有的属性值从100 –> 101, 有的属性值从100 –> 600，你得等耗时最长的属性值到达目标值才能关闭该obj所拥有的定时器，设计的思路就是每次执行轮询函数设置一个bStob = true;在遍历扫描json中属性的时候，只要有没到到目标值的属性，就设为false，这样定时器就不会关闭，即使有的属性值已经到达终点，此时轮询依旧会执行扫描，只不过此时该属性运动速度为0了，也不会运动了。也就是之前：
if(attr == cur) {
cleartInterval(obj.timer);
}
要增强为：
if (bStop) {
clearInterval(obj.timer);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>运动框架(四)：多值运动</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: orange;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div id="div1"></div>
<script type="text/javascript">
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function() {
var json = {
width: 600,
height: 200,
opacity: 30
};
startMove(this, json);
};
oDiv.onmouseout = function() {
var json = {
width: 100,
height: 100,
opacity: 100
};
startMove(this, json);
};
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
function startMove(obj, json) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var bStop = true;
for (var attr in json) {
var cur = 0;
if (attr === 'opacity') {
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
cur = parseInt(getStyle(obj, attr));
}
var speed = (json[attr] - cur) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur != json[attr]) {//凡是有未到达目标点的，一律不让定时器停下，否则有的属性不能到达目标值
bStop = false;
}
if (attr === 'opacity') {
cur += speed;
obj.style.filter = 'alpha(opacity:' + cur + ')';
obj.style.opacity = cur / 100;//Chrome,IE
} else {
obj.style[attr] = cur + speed + 'px';
}
}
//整个循环结束后，仍然保持着true，说明没有没到达目标值的属性，也就是都到了
if (bStop) {
clearInterval(obj.timer);//说明所有的属性都到达了目标值
}
}, 30);
}
</script>
</body>
</html>
标签：js,多值运动
0
投稿猜你喜欢
python中的字符串占位符的"{0:2}"
2021-04-28 20:23:39
通过MySQL内置全文检索实现中文的相关检索
2010-06-11 13:20:00
go redis实现滑动窗口限流的方式(redis版)
2024-02-02 18:04:27
MySQL 整表加密解决方案 keyring_file详解
2024-01-18 07:50:31
mysql 查询当天、本周,本月,上一个月的数据
2024-01-27 02:10:53
asp检测表单输入EMAIL合法性的函数
2007-10-16 13:39:00
python django中8000端口被占用的解决
2021-07-14 02:43:19
Python3.6简单反射操作示例
2021-05-04 03:32:05
javascript彩虹圈效果
2011-08-05 19:10:45
解决pip安装的第三方包在PyCharm无法导入的问题
2022-10-18 11:20:27
简单分析Python中用fork()函数生成的子进程
2021-11-24 02:48:02
keras 读取多标签图像数据方式
2021-01-30 18:26:48
程序猿新手学习必备的Python工具整合
2024-01-02 00:53:26
如何用Python和JS实现的Web SSH工具
2021-04-23 13:50:13
用 JavaScript 解数学题
2010-07-09 13:38:00
通用的下拉菜单__用DL\\DD\\DT解决无法遮住select的问题
2008-07-28 13:28:00
Sublime Text4 配置 Python3 环境、代码提示、编译报错的解决方案
2021-09-24 12:00:03
详解Node.js如何开发命令行工具
2024-05-05 09:21:19
用vue.js组件模拟v-model指令实例方法
2022-04-16 10:12:23
IE9硬件加速性能远超Chrome5.0和Firefox4.0
2010-06-09 11:12:00
