フローティングメニュー、上下スクロール効果を実現できます

フローティングメニュー、上下スクロール効果を実現できます

コードはさらに合理化できますが、時間の制約があるため、まずはここで投稿して、自分で最適化してメニュー項目を追加できるようにします。

<html>
<ヘッド>
<title>フローティング メニュー</title>
<スタイル>
体 {
フォントサイズ: 9pt; 色: #333333
}
分割 {
フォントサイズ: 9pt; 色: #333333
}
TD {
フォントサイズ: 9pt; 色: #333333
}
A:リンク{
フォントサイズ: 9pt; 色: #3366cc; 行の高さ: 13pt; テキスト装飾: なし
}
A: 訪問した
フォントサイズ: 9pt; 色: #3366cc; テキスト装飾: なし
}
A:アクティブ{
フォントサイズ: 9pt; テキスト装飾: なし
}
A:ホバー{
色: #0000ff; テキスト装飾: なし
}
</スタイル>
<script> var srepeat = null; function doscrollerie(dir、src、lument){if(ant == null){amonied = 10} if(dir == "up"){document.all [src] .all [src] erie( '" + dir +"'、 '" + src +"'、 " + lument +")、100)} windocument.onmouseout = new function(clearinterval(srepeat); srepeat = null "); window.document.ondragstart = new function(unter false"); "; event.srcelement.style.backgroundcolor =" 99ccff "; event.srcelement.style.cursor =" hand ";}} function msout(){{event.srcelement.style.color =" "; (){{event.srcelement.style.color = "990000"; event.srcelement.style.cursor = "hand";}} function markout(){{event.srcelement.style.color.color = "000000"; event.Style.Style.SursEL.Style.SursELE.Style.Style.Style.Style.Style.Style.Style.Style.Style.Style.Style.Style.Style.Style.Style.Style.Style.Style.Style.Style.Style.Style.Style.Style. artageId); if(target.style.display == "none"){target.style.display = "";} else {target.style.display = "none";}} </scrip>
</head>
<本文>
<表の境界線=0>
<TR><TD onMouseOver="this.style.backgroundColor = '990000';" onMouseOut="this.style.backgroundColor = '000099';" align=right BGCOLOR=#000099><A CLASS=scroll ONMOUSEOVER="return doScrollerIE('up','s1',10)" ONMOUSEOUT="clearInterval(sRepeat)" HREF="#"><font color=white>下にスクロール</A></TD></TR>
<TR><TD BGCOLOR=99ccff><DIV ID=s1 CLASS=sc1 STYLE="幅: 121; 高さ: 125; オーバーフロー: 非表示; 背景: #99ccff;">
<A CLASS=scr HREF="">アラビアンナイト</A><BR>
<A CLASS=scr HREF="">紅楼夢</A><BR>
<A CLASS=scr HREF="">水滸伝</A><BR>
<A CLASS=scr HREF="">真夏の夜</A><BR>
<A CLASS=scr HREF="">チャットルーム ver2.3</A><BR>
<A CLASS=scr HREF="">リバービーチ</A><BR>
<A CLASS=scr HREF="">トラブル</A><BR>
<A CLASS=scr HREF="">新しい中国</A><BR>
<A CLASS=scr HREF="">大問題</A><BR>
<A CLASS=scr HREF="">景東庭園</A><BR>
<A CLASS=scr HREF="">天国</A><BR>
<A CLASS=scr HREF="">HTML5</A><BR>
<A CLASS=scr HREF="">明るい月と星空</A><BR>
<A CLASS=scr HREF="">酒類ブランド</A><BR>
<A CLASS=scr HREF="">中国武術</A><BR>
</DIV></TD></TR>
<TR><TD align=right onMouseOver="this.style.backgroundColor = '990000';" onMouseOut="this.style.backgroundColor = '000099';" BGCOLOR=#000099><A CLASS=scroll ONMOUSEOVER="return doScrollerIE('down','s1',10)" ONMOUSEOUT="clearInterval(sRepeat)" HREF="#"><font color=white>上にスクロール</A></TD></TR> </table>
</本文>
</html>

<<:  docker-compose を使用して Clickhouse をすばやくデプロイする方法のチュートリアル

>>:  CSS 水平方向の中央揃えと最大幅の制限

推薦する

CSSメディアクエリのアスペクト比を小さくする方法

CSS メディア クエリには非常に便利なアスペクト比、aspect-ratio があり、幅と高さを直...

CSS 透明ボーダー背景クリップマジック

この記事では、CSSの透明な境界線の背景クリップの素晴らしい使い方を主に紹介し、みんなと共有し、自分...

Keepalived は Nginx の負荷分散と高可用性のサンプル コードを実装します

第1章: keepalivedの紹介VRRP プロトコルの目的は、静的ルーティングの単一点障害問題を...

知っておくべき 7 つのネイティブ JS エラーの種類

目次概要1. 範囲エラー2. 参照エラー3. 構文エラー4. タイプエラー5. URIエラー6. 評...

Next.js 入門チュートリアル

目次導入Next.jsプロジェクトを作成するNext.js プロジェクトを手動で作成するcreact...

JSオブジェクトの走査順序の詳細な説明

JavaScript ではオブジェクトを走査する順序は固定されていないと聞いたことがある人もいるかも...

CSS属性のデフォルト値width: autoとwidth: 100%の違いの詳細な説明

幅: 自動子要素(コンテンツ+パディング+境界線+余白を含む)は、親要素のコンテンツ領域全体を埋めま...

CSS の記述基準と順序を共有する [すべての人に使用を推奨]

CSSの記述順序1. 位置属性(位置、上、右、z-index、表示、フロートなど) 2. サイズ(...

SSL で Nginx リバース プロキシを構成する簡単な手順

序文リバース プロキシは、Web 経由で行われたリクエスト (http と https の両方) を...

ユーザー名が使用可能かどうかを確認するVueメソッド

この記事では、ユーザー名が使用可能かどうかを確認するためのVueの具体的なコードを例として紹介します...

Docker イメージの作成、アップロード、プル、およびデプロイ操作 (Alibaba Cloud を使用)

学習プロセス中にプッシュ イメージが常にタイムアウトすることがわかったため、Alibaba Clou...

デジタル時計効果を実現するJavaScript

この記事の例では、JavaScriptでデジタル時計効果を実装するための具体的なコードを参考までに共...

カラーブロックレポート効果の動的な表示を実現する HTML (サンプルコード)

HTMLカラーブロックを使用してデータを動的に表示する <スタイル タイプ="te...

IE6 で JS エラーが発生し、CSS が適用されない HTML エンコードの問題の解決策

テストでは、ページ定義がutf-8でエンコードされている場合、 js ファイルに中国語などのマルチバ...

Vueのwatch、computed、methodsの違いのまとめ

目次1 はじめに2 基本的な使い方2.1 方法2.2 計算プロパティ2.3 リスナーを見る3 3つの...