Javascriptチェーン運動のフレームワーク——プログレッシブコードを分析して、運動の原理を簡単に理解させます.
10054 ワード
チェーン運動とは、リングの一つです.私たちの多くの運動は実際には段階的なものを指しています.最初の段階で終わって、次の段階で動き始めます.
このチェーン運動の枠組みはこれらの問題を処理するためのものです.
まず前の運動フレームを見てみます.以下はJavascriptコードです.
チェーン運動はどうやって実現できますか?
私たちはパラメータfnEndを追加しています.これは関数です.彼は運動が終わる時に呼び出されます.
もちろんこの関数は伝えてもいいです.伝えなくてもいいです.判断が必要です.呼び出しは着信時のみ可能です.
一つの運動は次の運動を始める前に完成します.
このようにチェーン式の運動を完成することができます.簡単にコードを見てみましょう.
私たちは今この運動枠がありますか?それとも限界がありますか?それは何ですか?
じゃ同時に運動できないということです.つまりDivを同時に大きくしたいですが、どうすればいいですか?
次の更新時には、この問題を解決し、完璧な運動フレームを作り出します.この運動フレームは大多数の運動をサポートできます.
楽しみにしていてください
このチェーン運動の枠組みはこれらの問題を処理するためのものです.
まず前の運動フレームを見てみます.以下は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>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を同時に大きくしたいですが、どうすればいいですか?
次の更新時には、この問題を解決し、完璧な運動フレームを作り出します.この運動フレームは大多数の運動をサポートできます.
楽しみにしていてください