cari

Rumah >hujung hadapan web >tutorial js >JavaScript运动框架之多物体任意值运动的示例代码分享（三）

JavaScript运动框架之多物体任意值运动的示例代码分享（三）

黄舟
黄舟asal
2017-05-21 13:23:011401semak imbas

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

前面两篇都是单物体的运动，本文开始讲多物体的运动，比如多个p的各自不同的属性如宽，高，字体大小，透明度的缓冲运动变化。

从本文起，就不再使用offsetWdith,offsetHeight了等等，因为会出现问题，比如加个border，offsetWidth就会出现严重问题，参见我个人的博客JavaScript中offsetWidth的'bug'及其对策解决方案就是封装getStyle(obj, attr) 函数，用了获取运动中的当前值！

function getStyle(obj, name) {
 if(obj.currentStyle) {//IE
 return obj.currentStyle[name];
 } else {
 return getComputedStyle(obj, false)[name];
 }
}

既然是各个物体各自运动，那么他们之间有些变量就不能共享，比如定时器，每个对象都应有自己的定时器，因为每次启动定时器的时候先要清除上一个定时器，这就导致如果第一个物体还在运动，就把鼠标移动到第二个物体，瞬间清除上个定时器，导致第一个物体的运动不能运动到目标值就停下

另外，物体运动的样式，基本上就两类：一类是大小也就是px为单位的属性，还有一类就是透明度！

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>运动框架(三)：多物体运动</title>
 <style type="text/css">
 p {
  width: 100px;
  height: 100px;
  background: yellow;
  margin: 10px;
  float: left;
  filter: alpha(opacity:100);
  opacity: 1;
 }
 </style>
</head>
<body>
 <p id="p1">变高</p>
 <p id="p2">变宽</p>
 <p id="p3">fontSize Changed</p>
 <p id="p4">alpha</p>

 <script type="text/javascript">
 var doc = document;
 var op1 = doc.getElementById(&#39;p1&#39;);
 op1.onmouseover = function() {
  startMove(this, &#39;height&#39;, 300);
 };
 op1.onmouseout = function() {
  startMove(this, &#39;height&#39;, 100);
 };

 var op2 = doc.getElementById(&#39;p2&#39;);
 op2.onmouseover = function() {
  startMove(this, &#39;width&#39;, 300);
 };
 op2.onmouseout = function() {
  startMove(this, &#39;width&#39;, 100);
 };

 var op3 = doc.getElementById(&#39;p3&#39;);
 op3.onmouseover = function() {
  startMove(this, &#39;fontSize&#39;, 30);
 };
 op3.onmouseout = function() {
  startMove(this, &#39;fontSize&#39;, 16);
 };

 var op4 = doc.getElementById(&#39;p4&#39;);
 op4.onmouseover = function() {
  startMove(this, &#39;opacity&#39;, 30);
 };
 op4.onmouseout = function() {
  startMove(this, &#39;opacity&#39;, 100);
 };


 function getStyle(obj, attr) {
  if (obj.currentStyle) {
  return obj.currentStyle[attr];
  } else {
  return getComputedStyle(obj, null)[attr];
  }
 }

 function startMove(obj, attr, iTarget) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
  var cur = 0;
  if (attr === &#39;opacity&#39;) {
   cur = parseFloat(getStyle(obj, attr)) * 100;
  } else {
   cur = parseInt(getStyle(obj, attr));
  }
  var speed = (iTarget - cur) / 10;
  speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
  if (iTarget == cur) {
   clearInterval(obj.timer);
  } else {
   if (attr === &#39;opacity&#39;) {
   cur += speed;
   obj.style.filter = &#39;alpha(opacity:&#39; + cur + &#39;)&#39;;
   obj.style.opacity = cur / 100;//FireFox && Chrome
   } else {
   cur += speed;
   obj.style[attr] = cur + &#39;px&#39;;  
   }

  }
  }, 30);
 }

 </script>
</body>
</html>

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

Atas ialah kandungan terperinci JavaScript运动框架之多物体任意值运动的示例代码分享（三）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JavaScript运动框架之如何解决防抖动问题、悬浮对联（二）Artikel seterusnya：JavaScript运动框架之多值运动的具体介绍（四）

Artikel berkaitan

Lihat lagi