JavaScript運動架構多物體任意值運動（三），javascript架構

最後更新：2017-05-22 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

前面兩篇都是單物體的運動，本文開始講多物體的運動，比如多個div的各自不同的屬性如寬，高，字型大小，透明度的緩衝運動變化。

從本文起，就不再使用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"> div {  width: 100px;  height: 100px;  background: yellow;  margin: 10px;  float: left;  filter: alpha(opacity:100);  opacity: 1; } </style></head><body> <div id="div1">變高</div> <div id="div2">變寬</div> <div id="div3">fontSize Changed</div> <div id="div4">alpha</div> <script type="text/javascript"> var doc = document; var oDiv1 = doc.getElementById('div1'); oDiv1.onmouseover = function() {  startMove(this, 'height', 300); }; oDiv1.onmouseout = function() {  startMove(this, 'height', 100); }; var oDiv2 = doc.getElementById('div2'); oDiv2.onmouseover = function() {  startMove(this, 'width', 300); }; oDiv2.onmouseout = function() {  startMove(this, 'width', 100); }; var oDiv3 = doc.getElementById('div3'); oDiv3.onmouseover = function() {  startMove(this, 'fontSize', 30); }; oDiv3.onmouseout = function() {  startMove(this, 'fontSize', 16); }; var oDiv4 = doc.getElementById('div4'); oDiv4.onmouseover = function() {  startMove(this, 'opacity', 30); }; oDiv4.onmouseout = function() {  startMove(this, 'opacity', 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 === 'opacity') {   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 === 'opacity') {   cur += speed;   obj.style.filter = 'alpha(opacity:' + cur + ')';   obj.style.opacity = cur / 100;//FireFox && Chrome   } else {   cur += speed;   obj.style[attr] = cur + 'px';     }  }  }, 30); } </script></body></html>

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More