JavaScript运动框架 多值运动(四)_网络技术_宿州市腾雀网络科技有限公司

JavaScript运动框架 多值运动(四)

发布时间 - 2026-01-11 01:10:16 点击率：次

多值运动，也就是对于某个对象来说，不仅仅只是其中一个属性值在变化，而是好多个，比如宽，高，字体，透明度等等同时变化

当然了，多值运动会产生一个问题，就是定时器何时关闭的问题！当然是所有的属性值都运动到目标值了才能清理定时器，也就是等最慢的。就好比十个人一起聚餐，不能等到来一个人就开吃！

前几篇讲的都是一个元素对象中某一个属性的运动，这次讲同一个元素对象中多个属性值的缓冲运动，那么每个属性都有个终点（目标点），我们把这些属性及其目标值写成一个对象的形式，或者是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 # 多值运动 # JS多物体任意值链式缓冲运动 # JavaScript运动框架多物体任意值运动(三) # JavaScript运动框架解决防抖动问题、悬浮对联(二) # JavaScript运动框架解决速度正负取整问题(一) # javascript运动框架用法实例分析(实现放大与缩小效果) # JS运动框架之分享侧边栏动画实例 # Javascript 完美运动框架(逐行分析代码 # 让你轻松了运动的原理) # js运动框架_包括图片的淡入淡出效果 # JavaScript 创建运动框架的实现代码 # JavaScript运动框架链式运动到完美运动(五) # 多个 # 象中 # 都是 # 有个 # 是有 # 遍历 # 设为 # 用了 # 或者是 # 人就 # 一个问题 # 其中一个 # 你得 # 没到 # 大家多多 # 所拥有 # 就好比 # 容易产生 # 几篇 # 最慢

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：谷歌浏览器登录常见问题_谷歌浏览器一键修复微软系统兼容

下一篇：最好的建站系统：如何选择适合自己的网站建设平台？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：谷歌浏览器登录常见问题_谷歌浏览器一键修复微软系统兼容

下一篇：最好的建站系统：如何选择适合自己的网站建设平台？

JavaScript运动框架&nbsp;多值运动(四)

JavaScript运动框架多值运动(四)