javascriptのソースでvar result = c * (t /= d) * t + b;という関数は何を計算しているのでしょうか?
東京インタラクティブ・アド・アワードのサイトのソースをみたのですが、
http://tokyo.interactive.ad.awards.jp/Results09/ …
ソースの中にある
<script type="text/javascript">
smoothEaseIn = function(t, b, c, d){
var result = c * (t /= d) * t + b;
return result;
}
//new wrapScroll('sidemenu','content');
var mov2 = new wrapScroll('backtop','content05');
mov2.setTween(smoothEaseIn, 100);
</script>
のうち、
==
smoothEaseIn = function(t, b, c, d){
var result = c * (t /= d) * t + b;
return result;
==
の部分は何を計算しているのでしょうか?
「c * (t /= d) * t + b;」の部分はどういう意味でしょうか?
この部分が「wrapscroll.js」をあらわしているのはわかるのですが、その他のことがあまりわかりません。
詳しい方、ご教授いただけませんでしょうか?
No.1ベストアンサー
- 回答日時:
mov2.setTween(smoothEaseIn, 100);
.setTweenはwrapScroll.prototypeに設定されているメソッドですが
//wrapscroll.jsの断片
setTween: function(f,d){
if(f){
this.tween=f;
}
if(d){
this.Duration=d;
}
},
tween: function(t,b,c,d){
return c * (t /= d) * t + b;
}
渡された引数をmov2.tween, mov2.Durationに代入してます。プロパティー追加メソッドですね。
Durationのデフォルト値は60ですが、smoothEaseIn関数はあらかじめ用意されてる
tweenメソッドとまったく同じ処理ですから
mov2.setTween(false, 100);
こう書けます。
//wrapscroll.jsの断片
o.e.style.top = t.tween(t._timer++, s, e - s, t.Duration, o.e.style) + 'px';
tweenメソッドはタイマーで呼ばれ続けます。スムースに移動させる肝ですね。
それぞれの値ですが、_timerは実行ごとに1増えるカウンタ。
sは位置設定する要素の配置位置(obj.offsetTop)。eは表示領域上端位置(スクロール量)。
DurationはsetTweenに渡した100。
o.e.styleはオプション。デフォルトでは使われてませんね。
まとめると。
c * (t /= d) * t + b;
表示領域上端と要素位置との差 * (カウンタ /= 100) * カウンタ + 要素位置;
誤読がなければこのように読めるかと。
//単純にした式
smoothEaseIn = function(t, b, c, d, s){
return b + c; //要素位置 + 表示領域上端と要素位置との差
}
非常にわかりやすい説明ありがとうございました!!
めちゃくちゃわかりやすかったです☆参考にさせていただきます☆
ありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript JavaScriptの即時関数の書き方 1 2022/11/29 09:52
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- オープンソース Coinmarketcap api 1 2022/05/30 15:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript JAVASCRIPT 2 2022/04/15 15:10
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript 追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです 6 2022/05/29 09:57
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
idを使わずにonclickで自身の要...
-
functionから別のfunctionを実...
-
Jqueryのajax処理
-
jslintのエラーについて質問
-
function(e)の意味を教えてくだ...
-
jQueryの :not() .not() が有効...
-
関数名をテキストから読み込む...
-
if文等のブロック内での関数宣...
-
C#OpenCv V4にのエラーに関する...
-
同じIDで定義した要素の配列を...
-
JavaScript window.openで開く...
-
google apps scriptの終了のさせ方
-
Click回数を数え、規定された回...
-
FireFoxのjavascriptで自動でキ...
-
Boolean型配列中のTrueの有無を...
-
Vb.netのグローバル変数の宣言...
-
<a>タグのテキストを取得
-
javascript 変数名の連結をしたい
-
C#テキストボックスの文字を配...
-
ローカルにあるファイルを検索...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
functionから別のfunctionを実...
-
idを使わずにonclickで自身の要...
-
関数でy=g(x)のgとは何の略です...
-
jslintのエラーについて質問
-
jQueryの :not() .not() が有効...
-
クリックすると上に開くアコー...
-
jQueryのプラグイン「Skitter」...
-
関数名をテキストから読み込む...
-
小数点以下を5刻みで表示
-
XMLHttpRequestでキャッシュを...
-
jQueryでzipを解凍読み込みする...
-
Matlabで自作関数をオーバーロード
-
javascript(jQuery)でセル内...
-
要素名がスペースを含む場合のj...
-
ページ内に複数表がある場合のT...
-
処理前の「お待ちください」
-
JS 頭文字が大文字について
-
HTML5でファイルドラッグ&ドロ...
-
Javascriptリアルタイムエラー...
-
getElementByIdを使用したグロ...
おすすめ情報