カテゴリー「JavaScript」

ナビゲーションメニューの動的効果②

先に公開したナビゲーションメニューをランダムに切り替えるスクリプトですが、Math.randomで生成した数からメニューコンテナを開始数を得る部分を、if文で処理していました。


var n = Math.random();
if (n < 0.143) {
	n = 0;
} else if (n < 0.286) {
	n = 1;
} else if (n < 0.429) {
	n = 2;
} else if (n < 0.572) {
	n = 3;
} else if (n < 0.715) {
	n = 4;
} else if (n < 0.855) {
	n = 5;
} else {
	n = 6;
}

しかしこのやり方では、メニューの個数を変更した場合、その都度if文を書き換えなければなりません。メニューコンテナの個数は、d.querySelectorAll("#top_topnav li")からlengthで得ているのですから、この乱数もコンテナの個数に応じて取得できれば、スクリプトの汎用性が向上します。

そのためには、カウンタ処理の工夫か、それともなにか複雑な数学計算が必要なのか、解決策をちょっとだけ模索していたのですが、適当に試していたら、答えが見つかりました。それが、以下の式です。


n = parseInt(n * MAX);

コンテナの個数を乱数に掛け、それをparseIntで整数化したのですが、たとえばコンテナの個数が7個の場合、きちんと0~6の数字がランダムに得られること(なおかつ最大数が6を超えないこと)を確認しました。ただし、その数学的根拠後知恵的に考えてみれば、Math.randomの値は0~1未満なので、1を掛けない限りMAXよりも必ず小さな数になるわけです。MAXが7の場合、最大6.9999...にしかならないので、parseIntで少数点以下は切り捨てられ、6以下の整数になります。なお、Math.randomの最大値が1の場合もあるようですが、今回の処理では、最大値がMAXと同じでも問題ありません。なぜかというに、やはりMAXが7でnも7になってしまった(7x1=7)場合、ボタンコンテナの順序は7,8,9,10,11,12,13になりますが、ここではMAX以上の数字からはMAXを引くことにしていますから、この順序は0,1,2,3,4,5,6になり、nが0の場合と同じ結果になります。ですから、ボタンの表示に問題は起きません。は答えられません。なぜかというに、ただの思いつきだったからです。まあ、そんなカンに頼っても、うまくいくこともあるわけですね。

ナビゲーションメニューの動的効果

先週、とある授業を行った際に、約1年ぶりにWordPressの構造やテンプレート等の作り方を調べ直し、少しだけWordPressサイトへの関心が復活しました。そこで、当サイトトップページのデザインも、実験ついでに、若干、変更してみました。主として変更を加えたものは、サイトのナビゲーションメニューです。

従来は、ヘッダー画像の下に、他のページと同じように黒い棒状のデザインで、横並びにメニューを配置していましたが、これをヘッダー画像の上に分散して配置してみました。

「ナビゲーションメニューの動的効果」の続きを読む→

krzm.jp:not(so-called mobile friendly)