jQuery ui は動的な丸みを帯びたグラデーションの Web サイト ナビゲーション メニュー効果 code_jquery を実装します。
この記事の例では、動的角丸グラデーション Web サイト ナビゲーション メニュー効果コードの jQuery UI 実装について説明します。皆さんの参考に共有してください。詳細は以下の通りです。
今日は、jQuery UI に基づいた Web サイトのグラデーション ナビゲーション メニューを共有します。これは、フェードインおよびフェードアウト効果を備えたメイン ナビゲーションとして使用できます。メニュー上にマウスを移動すると、メニュー項目が表示されます。ローカルでテストする場合は注意してください。紹介したいくつかのJSスクリプトファイルはローカルに保存するのがベストで、メニューの互換性も良好です。
ランニングエフェクトのスクリーンショットを見てみましょう:
オンライン デモのアドレスは次のとおりです:
http://demo.jb51.net/js/2015/jquery-ui-cicle-button-style-web-nav-codes/
具体的なコードは次のとおりです:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery动态效果导航菜单</title>
<style type="text/css">
<!--
@import url(http://fonts.googleapis.com/css?family=Lobster);
body {margin:0; padding:0; background:#ddd;}
#nav{position:relative; margin:40px; background:#eee; padding:0; font-family:'Lobster', Arial, Helvetica, sans-serif; font-size:21px; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:2px 2px 3px #ccc; -webkit-box-shadow:2px 2px 3px #ccc; box-shadow:2px 2px 3px #ccc;}
#nav .clear{clear:both;}
#nav ul{padding:0 0 0 5px; margin:0; list-style:none;}
#nav li{float:left; margin:5px 10px 5px 0; background:#eee; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
#nav li a{text-decoration:none; color:#9e0039; display:block; padding:10px 15px;}
-->
</style>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<!-- rounded corners for IE -->
<script src="js/DD_roundies_0.0.2a-min.js"></script>
<script>
DD_roundies.addRule("#nav", "5px");
DD_roundies.addRule("#nav li", "5px");
</script>
<script>
$(document).ready(function(){
$nav_li=$("#nav li");
$nav_li_a=$("#nav li a");
var animSpeed=450; //fade speed
var hoverTextColor="#fff"; //text color on mouse over
var hoverBackgroundColor="#9e0039"; //background color on mouse over
var textColor=$nav_li_a.css("color");
var backgroundColor=$nav_li.css("background-color");
//text color animation
$nav_li_a.hover(function() {
var $this=$(this);
$this.stop().animate({ color: hoverTextColor }, animSpeed);
},function() {
var $this=$(this);
$this.stop().animate({ color: textColor }, animSpeed);
});
//background color animation
$nav_li.hover(function() {
var $this=$(this);
$this.stop().animate({ backgroundColor: hoverBackgroundColor }, animSpeed);
},function() {
var $this=$(this);
$this.stop().animate({ backgroundColor: backgroundColor }, animSpeed);
});
});
</script>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#about">关于我</a></li>
<li><a href="#portfolio">配置说明</a></li>
<li><a href="#recent">回收清单</a></li>
<li><a href="#experiments">心情速递</a></li>
<li><a href="#contact">联系我</a></li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>
この記事が皆さんの jquery プログラミング設計に役立つことを願っています。
ホット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）
ホットトピック
7549
15
1382
52
83
11
22
90
Elden Ring UI が表示され続けるのはなぜですか?
Mar 11, 2024 pm 04:31 PM
エルデンズリングでは、このゲームの UI ページは一定時間が経過すると自動的に非表示になります。UI が常に表示される方法を知らないプレイヤーも多いです。プレイヤーはディスプレイとサウンドの設定でゲージの表示設定を選択できます。クリックすると回転します。の上。 Elden Ring UI が表示され続けるのはなぜですか? 1. まず、メインメニューに入った後、[システム構成] をクリックします。 2. [表示とサウンドの設定]インターフェースで、メーターの表示設定を選択します。 3. 「有効にする」をクリックして完了します。
jQueryのリファレンスメソッドを詳しく解説：クイックスタートガイド
Feb 27, 2024 pm 06:45 PM
jQuery 参照方法の詳細説明: クイック スタート ガイド jQuery は、Web サイト開発で広く使用されている人気のある JavaScript ライブラリであり、JavaScript プログラミングを簡素化し、開発者に豊富な機能を提供します。この記事では、jQuery の参照方法を詳しく紹介し、読者がすぐに使い始めるのに役立つ具体的なコード例を示します。 jQuery の導入 まず、HTML ファイルに jQuery ライブラリを導入する必要があります。 CDN リンクを通じて導入することも、ダウンロードすることもできます
jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか?
Feb 28, 2024 pm 03:12 PM
jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエスト メソッドを使用した具体的なコード例です。まず、jQuery ライブラリ ファイルが含まれていることを確認してから、$.ajax({u
jQueryで要素の高さ属性を削除するにはどうすればよいですか?
Feb 28, 2024 am 08:39 AM
jQueryで要素の高さ属性を削除するにはどうすればよいですか?フロントエンド開発では、要素の高さ属性を操作する必要が生じることがよくあります。要素の高さを動的に変更する必要がある場合や、要素の高さ属性を削除する必要がある場合があります。この記事では、jQuery を使用して要素の高さ属性を削除する方法と、具体的なコード例を紹介します。 jQuery を使用して高さ属性を操作する前に、まず CSS の高さ属性を理解する必要があります。 height 属性は要素の高さを設定するために使用されます
jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する
Feb 28, 2024 pm 09:06 PM
タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキスト コンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリ ファイルを導入し、次のコードがページに導入されていることを確認する必要があります: <
jQuery を使用してすべての a タグのテキスト コンテンツを変更する
Feb 28, 2024 pm 05:42 PM
タイトル: jQuery を使用して、すべての a タグのテキスト コンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンク タグ (タグ) のテキスト コンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。
PS グラデーション ツールの使用方法 - PS グラデーション ツールの使用方法
Mar 05, 2024 pm 06:28 PM
PSソフトは事務仕事で多くの人が使っているソフトですが、PSグラデーションツールの使い方をご存知ですか?以下は編集部がお届けするPSグラデーションツールの使い方です。以下をご覧ください。 1. 新しいドキュメントを開くか作成します。まず、Photoshop ソフトウェアを開いて新しいドキュメントを作成するか、既存の画像ファイルを開きます。グラデーション ツールを選択する: ツールバーの左側でグラデーション ツール (長方形マーキー ツールとペイント バケット ツールの間) を見つけ、クリックして選択します。 3. グラデーション タイプを設定します。ツール オプション バーで、さまざまなグラデーション タイプを選択できます。線形グラデーション、放射状グラデーション、角度グラデーション、その他のオプションから選択できます。 [グラデーション タイプ] ドロップダウン メニューをクリックし、必要なグラデーション タイプを選択します。 4
jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか?
Feb 29, 2024 am 09:03 AM
jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery を使用して DOM 要素を操作する場合、要素に特定の属性があるかどうかを判断する必要がある状況がよく発生します。この場合、jQuery が提供するメソッドを使用してこの関数を簡単に実装できます。以下では、jQuery 要素が特定の属性を持つかどうかを判断するために一般的に使用される 2 つの方法を紹介し、具体的なコード例を添付します。方法 1: attr() メソッドと typeof 演算子 // を使用して、要素に特定の属性があるかどうかを判断します
