ゴージャスな選択コントロールのドロップダウン メニューをシミュレートする js CSS
本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果。分享给大家供大家参考。具体如下：
这是一个JS+CSS技术实现的Select控件效果，模拟出来的，比默认的Select更漂亮，有了这个模板，你修改Select就更方便了，由此你也可以将其制作成CSS下拉菜单，在兼容性方面暂未测试，在IE8下没问题。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-css-select-control-style-codes/
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模拟select控件</title>
<style>
html,body{height:100%;overflow:hidden;}
body,div,form,h2,ul,li{margin:0;padding:0;}
ul{list-style-type:none;}
body{background:#23384e;font:12px/1.5 \5fae\8f6f\96c5\9ed1;}
#search,#search form,#search .box,#search .select,#search a{background:url(images/search.jpg) no-repeat;}
#search,#search .box,#search form{height:34px;}
#search{position:relative;width:350px;margin:10px auto;}
#search .box{background-position:right 0;}
#search form{background-repeat:repeat-x;background-position:0 -34px;margin:0 20px 0 40px;}
#search .select{float:left;color:#fff;width:190px;height:22px;cursor:pointer;margin-top:4px;line-height:22px;padding-left:10px;background-position:0 -68px;}
#search a{float:left;width:80px;height:24px;color:#333;letter-spacing:4px;line-height:22px;text-align:center;text-decoration:none;background-position:0 -90px;margin:4px 0 0 10px;}
#search a:hover{color:#f60;background-position:-80px -90px;}
#search .sub{position:absolute;top:26px;left:40px;color:#fff;width:198px;background:#2b2b2b;border:1px solid #fff;display:none;}
#search .sub li{height:25px;line-height:24px;cursor:pointer;padding-left:10px;margin-bottom:-1px;border-bottom:1px dotted #fff;}
#search .sub li.hover{background:#8b8b8b;}
</style>
<script type="text/javascript">
window.onload = function ()
{
var oSelect = document.getElementsByTagName("span")[0];
var oSub = document.getElementsByTagName("ul")[0];
var aLi = oSub.getElementsByTagName("li");
var i = 0;
oSelect.onclick = function (event)
{
var style = oSub.style;
style.display = style.display == "block" ? "none" : "block";
//阻止事件冒泡
(event || window.event).cancelBubble = true
};
for (i = 0; i < aLi.length; i++)
{
//鼠标划过
aLi[i].onmouseover = function ()
{
this.className = "hover"
};
//鼠标离开
aLi[i].onmouseout = function ()
{
this.className = "";
};
//鼠标点击
aLi[i].onclick = function ()
{
oSelect.innerHTML = this.innerHTML
}
}
document.onclick = function ()
{
oSub.style.display = "none";
};
};
</script>
</head>
<body>
<div id="search">
<div class="box">
<form>
<span class="select">请选择游戏名称</span>
<a href="javascript:;">搜索</a>
</form>
</div>
<ul class="sub">
<li>地下城与勇士</li>
<li>魔兽世界（国服）</li>
<li>魔兽世界（台服）</li>
<li>热血江湖</li>
<li>大话西游II</li>
<li>QQ幻想世界</li>
</ul>
</div>
</body>
</html>希望本文所述对大家的javascript程序设计有所帮助。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7369
15
1628
14
1355
52
1266
25
1215
29
vscodeで不明な属性を設定する方法 vscodeで不明な属性を設定する方法
May 09, 2024 pm 02:43 PM
1. まず、左下隅にある設定アイコンを開き、設定オプションをクリックします。 2. 次に、ジャンプしたウィンドウで CSS 列を見つけます。 3. 最後に、不明なプロパティ メニューのドロップダウン オプションをエラー ボタンに変更します。 。
Vue のコンポーネント内のスタイルを分離する方法
May 09, 2024 pm 03:57 PM
Vue コンポーネントでのスタイルの分離は 4 つの方法で実現できます。 スコープ付きスタイルを使用して、分離されたスコープを作成します。 CSS モジュールを使用して、一意のクラス名を持つ CSS ファイルを生成します。モジュール性と再利用性を維持するために、BEM 規則を使用してクラス名を編成します。まれに、スタイルをコンポーネントに直接挿入できる場合がありますが、これはお勧めしません。
Bitstamp Exchange Pro に登録するにはどうすればよいですか?安全ですか？公式ですか？
Aug 13, 2024 pm 06:36 PM
BitstampPro の登録方法は? BitstampPro Web サイトにアクセスしてください。個人情報とメールアドレスを入力してください。パスワードを作成し、規約に同意します。メールアドレスを確認してください。 BitstampPro は安全ですか?認証が必要です。 2 要素認証の使用を強制します。ほとんどの資産は冷蔵倉庫に保管されています。 HTTPS を使用して通信を暗号化します。定期的なセキュリティ監査を実施します。 BitstampPro は合法ですか?ルクセンブルクで登録されています。ルクセンブルク金融監督委員会によって規制されています。マネーロンダリング防止および顧客確認に関する規制を遵守します。
DCAT管理者にデータを追加するためにクリックのカスタムテーブル関数を実装する方法は？
Apr 01, 2025 am 07:09 AM
DCATを使用するときにDCATADMIN（Laravel-Admin）にデータを追加するためにカスタムクリックのテーブル関数を実装する方法...
仮想通貨取引プラットフォームアプリの最新のランキングリスト（上位10の仮想通貨取引プラットフォームの在庫）
Mar 04, 2025 pm 03:51 PM
この記事では、OKX、Binance、Gate.io、Huobi、Kraken、Coinbase、Kucoin、Crypto.com、Bitfinex、Bitstampなど、世界のトップ10の主要な暗号通貨取引所をリストします。技術的な強さ、豊富な製品ライン、厳格なコンプライアンス運用、革新的な生態学的構造により、これらの交換は世界の暗号通貨市場でリードしています。この記事では、それぞれ特別な機能、技術アーキテクチャ、セキュリティ対策、コンプライアンス資格、エコシステム構造を紹介し、投資家が適切な取引プラットフォームを選択するための参照を提供します。
ソースファイルの形式は何ですか?
May 09, 2024 pm 10:51 PM
ソース ファイルは、元のコードまたはデータを含むコンパイルされていないファイルであり、その形式はプログラミング言語やアプリケーションによって異なります。一般的な形式には、テキスト ファイル (.txt、.csv)、プログラミング言語 (.py、.java など)、マークアップ言語 (.html、.css など)、画像ファイル (.png、.csv など) が含まれます。 jpg)、ビデオ ファイル (.mp4、.avi など)、およびその他の形式 (JSON (.json)、PDF (.pdf)、Word ドキュメント (.doc) など)。
サムスンが英国のナレッジグラフスタートアップを買収 ローカルAIが人間の思考をシミュレートしてタスクを処理
Jul 19, 2024 pm 12:44 PM
最近、Samsung は、ローカル AI 機能を強化し、よりパーソナライズされた AI エクスペリエンスをユーザーに提供するために、英国のナレッジ グラフ スタートアップである Oxford Semantic Technologies の買収を発表しました。同社の主力製品は、ナレッジ グラフ テクノロジを使用して情報を相互接続されたネットワークとして保存する AI エンジン RDFox です。データの処理方法は、知識の取得、記憶、思い出し、推論という人間の思考方法と似ています。このテクノロジーにより、ユーザーが使用する製品やサービスに対するデバイスの理解が深まり、迅速な情報検索や推奨が可能になります。オックスフォード セマンティック テクノロジーズは、オックスフォード大学教授のイアン ホロックス氏、ボリス モティック氏、ベルナルド クエンカ氏の 3 人によって 2017 年に設立されたことがわかっています。
Zインデックスとは何を意味しますか?
May 09, 2024 pm 11:21 PM
z-index は、紙を重ねる順序と同様に、ページ上で要素が重なる順序を制御する CSS プロパティです。その仕組みは次のとおりです。すべての要素のデフォルトの z-index 値は 0 です。より高い z-index 値を持つ要素は、より低い z-index 値を持つ要素を上書きします。 z-index を使用すると、フローティング要素の作成、重なり合う要素の順序の制御、および 3 次元効果の作成が可能になります。使用する場合は、使いすぎを避ける、負の値を使用する、ブラウザの互換性に注意するなどの考慮が必要です。
