当前位置:Gxlcms > JavaScript > JavaScript运动框架之多值运动的具体介绍(四)

JavaScript运动框架之多值运动的具体介绍(四)

时间:2021-07-01 10:21:17 帮助过:33人阅读

这篇文章主要为大家详细介绍了JavaScript运动框架第四部分,多值运动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

前几篇讲的都是一个元素对象中某一个属性的运动,这次讲同一个元素对象中多个属性值的缓冲运动,那么每个属性都有个终点(目标点),我们把这些属性及其目标值写成一个对象的形式,或者是json状!容易产生的问题就是上面说的,这里用了共同的速度函数,但有的属性值从100 –> 101, 有的属性值从100 –> 600,你得等耗时最长的属性值到达目标值才能关闭该obj所拥有的定时器,设计的思路就是每次执行轮询函数设置一个bStob = true;在遍历扫描json中属性的时候,只要有没到到目标值的属性,就设为false,这样定时器就不会关闭,即使有的属性值已经到达终点,此时轮询依旧会执行扫描,只不过此时该属性运动速度为0了,也不会运动了。也就是之前:


要增强为:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>运动框架(四):多值运动</title>
 <style type="text/css">
 p {
  width: 100px;
  height: 100px;
  background: orange;
  margin: 10px;
  float: left;
 }
 </style>
</head>
<body>
 <p id="p1"></p>

 <script type="text/javascript">
 var op = document.getElementById('p1');
 op.onmouseover = function() {
  var json = {
  width: 600,
  height: 200,
  opacity: 30
  };
  startMove(this, json);
 };
 op.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>

以上就是JavaScript运动框架之多值运动的具体介绍(四)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行