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ランキング
-
functionから別のfunctionを実...
-
関数でy=g(x)のgとは何の略です...
-
Javascriptで引数の参照渡しか...
-
CDの曲をケータイのSDに移す
-
ASP 最終日の表示
-
JavaScript 、function、return
-
jQueryでzipを解凍読み込みする...
-
小数点以下を5刻みで表示
-
jQuery cssメソッドでの変数の...
-
現在地の取得について
-
Javascriptで文字列操作
-
jQueryを使用したギャラリー
-
idを使わずにonclickで自身の要...
-
jQueryの"return false"の役割...
-
javascriptで自動計算フォーム...
-
日本語入力の禁止
-
URLの一部をコピーできるブック...
-
google apps scriptの終了のさせ方
-
空の配列に2次元配列の追加
-
第3日曜日のみの日付を取得、...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
idを使わずにonclickで自身の要...
-
functionから別のfunctionを実...
-
関数でy=g(x)のgとは何の略です...
-
jslintのエラーについて質問
-
クリックすると上に開くアコー...
-
XMLHttpRequestでキャッシュを...
-
ajax反映後のjqueryが動かない
-
function(e)の意味を教えてくだ...
-
要素名がスペースを含む場合のj...
-
jQueryの :not() .not() が有効...
-
jQueryでzipを解凍読み込みする...
-
関数名をテキストから読み込む...
-
getElementByIdを使用したグロ...
-
jqueryuiのdialog
-
jqueryのグローバル変数とロー...
-
jQuery 同じ処理を関数にまとめ...
-
XMLHttpRequestオブジェクトが...
-
addEventListener()でリスナー...
-
drawImageの描画順序の指定につ...
-
javascript(jQuery)でセル内...
おすすめ情報