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ランキング
-
関数でy=g(x)のgとは何の略です...
-
jQueryでzipを解凍読み込みする...
-
idを使わずにonclickで自身の要...
-
functionから別のfunctionを実...
-
getElementByIdを使用したグロ...
-
phpでの文字の点滅表示
-
CDの曲をケータイのSDに移す
-
Javascriptで引数の参照渡しか...
-
JAVAスクリプトで指定時間以降...
-
jqueryのグローバル変数とロー...
-
即時関数でプライベート変数的...
-
現在時刻から指定時刻までの時...
-
画像がフェードイン・アウトす...
-
javascript(jQuery)でセル内...
-
一つのアクションで関数を二つ...
-
jQuery 同じ処理を関数にまとめ...
-
google apps scriptの終了のさせ方
-
ActiveXobjectが作成できない
-
Boolean型配列中のTrueの有無を...
-
同じIDで定義した要素の配列を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
idを使わずにonclickで自身の要...
-
functionから別のfunctionを実...
-
関数でy=g(x)のgとは何の略です...
-
jslintのエラーについて質問
-
クリックすると上に開くアコー...
-
XMLHttpRequestでキャッシュを...
-
ajax反映後のjqueryが動かない
-
要素名がスペースを含む場合のj...
-
function(e)の意味を教えてくだ...
-
jQueryの :not() .not() が有効...
-
jQueryでzipを解凍読み込みする...
-
getElementByIdを使用したグロ...
-
関数名をテキストから読み込む...
-
jqueryuiのdialog
-
addEventListener()でリスナー...
-
jqueryのグローバル変数とロー...
-
jQuery 同じ処理を関数にまとめ...
-
drawImageの描画順序の指定につ...
-
XMLHttpRequestオブジェクトが...
-
jQueryが読み込めない
おすすめ情報