Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理
生活随笔
收集整理的這篇文章主要介紹了
Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
所謂鏈式運動，就是一環扣一環。我們的很多運動實際上來說指的就是分階段的，第一個階段動完，下個階段開始動。
這個鏈式運動框架就是用來處理這些問題的。
我們先來看下之前的運動框架,以下是Javascript 代碼
function getStyle(obj, name) {if (obj.currentStyle) {return obj.currentStyle[name];} else {return getComputedStyle(obj, null)[name];} }function startMove(obj, attr, iTarget) {clearInterval(obj.time);obj.time = setInterval(function() {var cur = 0;if (attr == 'opacity') {cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);} else {cur = parseInt(getStyle(obj, attr));}var speed = (iTarget - cur) / 6;speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);if (cur == iTarget) {clearInterval(obj.time);} else {if (attr == 'opacity') {obj.style.filter = 'alpha(opacity=' + cur + speed + ')';obj.style.opacity = (cur + speed) / 100;} else {obj.style[attr] = cur + speed + 'px';}}}, 30); }實際上來說他就是相當于一個階段型的運動框架，一個物體運動到某個地方就停下來了。
那么怎么能實現鏈式運動呢？
我們在加一個參數fnEnd ,這個是個函數，他會在運動結束的時候被調用。
當然這個函數可以傳可以不傳，所以需要做個判斷。只有當傳入的時候在調用即可。
原理就是： 一個運動完成 在開始下次的運動。
這樣就能夠完成鏈式運動，簡單吧，讓我們看看代碼。
<style type="text/css">#div1{width: 100px; height: 100px; background: red;}</style> <script src="js/move_lianshi.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">window.onload=function(){var oDiv=document.getElementById("div1");oDiv.onmouseover=function(){startMove(oDiv,'width',300,function(){startMove(oDiv,'height',300);});};}</script></head><body><div id="div1"></div></body>Javascript:
function getStyle(obj, name) {if (obj.currentStyle) {return obj.currentStyle[name];} else {return getComputedStyle(obj, null)[name];} }function startMove(obj, attr, iTarget,fnEnd) {clearInterval(obj.time);obj.time = setInterval(function() {var cur = 0;if (attr == 'opacity') {cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);} else {cur = parseInt(getStyle(obj, attr));}var speed = (iTarget - cur) / 6;speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);if (cur == iTarget) {clearInterval(obj.time);if(fnEnd)fnEnd();} else {if (attr == 'opacity') {obj.style.filter = 'alpha(opacity=' + cur + speed + ')';obj.style.opacity = (cur + speed) / 100;} else {obj.style[attr] = cur + speed + 'px';}}}, 30); }這樣Div就會先變寬在變高。
我們現在這個運動框架還是會有局限性，那是什么呢？
那么就是不能同時運動，也就是說我想讓Div 同時變大變寬 那又怎么辦呢？
在下一次更新的時候，我們會解決這個問題，并且推出一個完美的運動框架，這個運動框架能夠支持大多數的運動。
敬請期待~
轉載于:https://www.cnblogs.com/IcemanZB/p/4191312.html
總結
以上是生活随笔為你收集整理的Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Storm0.9.4安装 - OPEN
- 下一篇： 通过Java代码浅谈HTTP协议