ここで少し説明すると、これは動的にフォント サイズを設定する機能に関するものであるため、3D メニューの形式は考慮されていないため、特定の実装では単純にコサイン関数 を使用しました。メニューの高さ全体に 2 つの文字が表示されるようにするには、波の頂点が唐突な印象を与えます。実際には、cos(x/K) の K は、メニュー項目の数と最大フォント値に関連する関数である必要があります。ここでは単純に定数に設定します。 完全なコードは次のとおりです。 コードをコピーします コードは次のとおりです: メニューリスト <br>オーバーフロー: 非表示; <br>} <br>背景色: #111111; <br>カラー: #eee; <br>ul#menu { <br>位置:絶対; <br>左: 40%; <br>li { <br>リストスタイル: なし; <br>マージン: 1px; { <br>テキスト装飾: なし; <br>フォントファミリー: arial、helvetica、サンセリフ; <br>フォントサイズ: 20px; > <br>var menu = function(){ <br>var $ = function(o){ <br>return document.getElementById( o); <br>} <br>varwords = document.getElementsByTagName('a'); <br>var size;//同じターゲットかどうかを示します。 >var max_size = 40, min_size = 20;//最大フォントと最小フォント<br>var go = 0;//go はポインターの方向に基づくアニメーションを示し、dT はポインターが移動しているかどうかを示します<br>var xm, xmb , ym, ymb ;//ポインタの移動と判定<br>/*Storage*/ <br>var addEvent = function(o, e, f){ <br>if (window.addEventListener) { <br>o.addEventListener (e, f, false); <br>} <br>else <br>if (window.attachEvent) { <br>o.attachEvent('on' e, f); <br>else { <br> return false; <br>} <br>} <br>var pxTop = function(o){//ドキュメント全体に対する要素の y 位置を取得します。 <br>return o.offsetParent ? pxTop(o.offsetParent) : o.offsetTop; <br>} <br>addEvent(document, 'mousemove', function(e){ <br>e = e || window.event; <br>ym = (e .clientY || e.y) ドキュメント .body.scrollTop; <br>if (ym != ymb) { <br>ymb = ym; <br>od = e.target : (e. srcElement ? e.srcElement : null ); <br>}) <br>var getStyle = function(elem, name){ <br>if (elem.style[name]) { <br>return elem.style[name] ; <br>} <br>else <br>if (elem.currentStyle) { <br>return elem.currentStyle[名前]; <br>} <br>else <br>if (document.defaultValue && document.defaultValue .getComputedStyle) { <br> name = name.replace(/([A-Z])/g, "-$1"); <br>nmae = name.toLowerCase(); <br>var s = document.defaultValue.getComputedStyle (要素, 名前); <br>return s ? s : null; <br>else <br>return null; <br>var test(){ <br>for (var) i = 0; i <br>var p = <br>size = parseInt(p, "fontSize"); .className == "移動" ) { <br>if (p != od) { <br>p.style.color = "白" <br>} <br>p.style.fontSize = Math.max( go * Math.cos(( ym - pxTop(p)) / (3 * max_size)), min_size) "px"; <br>od.style.color = " yellow"; max_size) { <br>go = go <br>} <br>} <br>else { <br>if (go >= min_size) { <br>go = go - 0.05; 🎜>p.style.fontSize = (Math.max(size - 0.05, min_size)) "px"; <br>p.style.color = "white" <br>} <br>} <br>} <br>return { <br> テスト: テスト <br>} <br>}() <br>window.onload = function(){ <br>setInterval(menu.test, 16) <br>}<br> スクリプト javascript web dhtml css ajax プログラミング design ウェブデザイン html dom webdev reference ツール チュートリアル xmlhttprequest menu xml ライブラリ 開発
