jQueryで円形アイコンメニューの回転切り替え機能を作る
今回は、円形アイコンメニューの回転切り替えを行うためのjQueryの機能について説明します。jQueryで円形アイコンメニューの回転切り替えを行うための注意点について、実際のケースを見てみましょう。
feature.presenter.1.5.css
body {
margin: 0;
font-family: Tahoma;
}
.feature-presenter {
position: absolute;
}
.feature-presenter-icon {
background-color: white;
text-align: center;
transition: transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
border-radius: 50%;
cursor: pointer;
}
.feature-presenter img {
max-width: 100%;
transition: transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
filter: blur(0px);
-webkit-filter: blur(0px);
image-rendering: -webkit-optimize-contrast;
}
.feature-presenter i {
font-size: 85px;
/*filter: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="gaussian_blur"><feGaussianBlur in="SourceGraphic" stdDeviation="0" /></filter></defs></svg>#gaussian_blur');*/
}
.feature-presenter-circle-container {
border-radius: 50%;
display: inline-block;
border: 1px solid rgba(0,0,0,0.09);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.09);
transition: transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
background-color: white;
}
.feature-presenter-text-container {
line-height: 1.3;
display: inline-block;
vertical-align: top;
z-index: 1001;
position: relative;
overflow: hidden;
}
.feature-presenter-text-heading {
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
margin-bottom: 10px;
color: rgba(0, 0, 0, 0.8);
}
.feature-presenter-text-description {
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
transition: transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
color: rgba(0, 0, 0, 0.5);
}
.feature-presenter-text-container-out {
-webkit-transform: translate(200%, 0);
transform: translate(200%, 0);
-webkit-transition: -webkit-transform 0.5s ease-in;
transition: transform 0.5s ease-in;
}html:
<!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>基于jQuery环形图标菜单旋转切换特效</title>
<link href='css/feature.presenter.1.5.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
</head>
<body>
<p id="test-element"></p>
<script src="js/feature.presenter.1.5.min.js"></script>
<script>
/* 图片地址可以是相对路径或绝对路径；标题和描述可以包含HTML */
var settings = [ {image: 'images/zzsc1.png', heading: '脚本之家', description: 'www.jb51.net'},
{ image: 'images/zzsc2.png', heading: '脚本之家', description: 'www.jb51.net' },
{ image: 'images/zzsc3.png', heading: '脚本之家', description: 'www.jb51.net' },
{ image: 'images/zzsc4.png', heading: '脚本之家', description: 'www.jb51.net' },
{ image: 'images/zzsc5.png', heading: '脚本之家', description: 'www.jb51.net' },
{ image: 'images/zzsc6.png', heading: '脚本之家', description: 'www.jb51.net' }
];
var options = {
circle_radius: 220,
normal_feature_size: 100,
highlighted_feature_size: 150,
top_margin: 100,
bottom_margin: 50,
spacing: 40,
min_padding: 50,
heading_font_size: 30,
description_font_size: 20,
type: 'image'
};
var fp = new FeaturePresenter($("#test-element"), settings, options);
fp.createPresenter();
</script>
</body>
</html>この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
jsonp+json による AJAX クロスドメイン リクエストの実装
以上がjQueryで円形アイコンメニューの回転切り替え機能を作るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホット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）
ホットトピック
7322
9
1625
14
1350
46
1262
25
1209
29
Win11 でタスクバーのサムネイル プレビューを無効にする方法は? マウスを移動してタスクバー アイコンのサムネイル表示テクニックをオフにする
Feb 29, 2024 pm 03:20 PM
この記事では、Win11システムでタスクバーアイコンをマウスで移動したときに表示されるサムネイル機能をオフにする方法を紹介します。この機能はデフォルトでオンになっており、ユーザーがタスクバー上のアプリケーション アイコンの上にマウス ポインタを置くと、アプリケーションの現在のウィンドウのサムネイルが表示されます。ただし、一部のユーザーは、この機能があまり役に立たない、またはエクスペリエンスに悪影響を与えると感じ、オフにしたい場合があります。タスクバーのサムネイルは楽しい場合もありますが、気が散ったり煩わしい場合もあります。この領域にマウスを移動する頻度を考えると、重要なウィンドウを誤って閉じてしまったことが何度かある可能性があります。もう 1 つの欠点は、より多くのシステム リソースを使用することです。そのため、リソース効率を高める方法を探している場合は、それを無効にする方法を説明します。しかし
ExcelアイコンをPPTスライドに挿入する方法
Mar 26, 2024 pm 05:40 PM
1. PPT を開き、Excel アイコンを挿入する必要があるページに移動します。 「挿入」タブをクリックします。 2. ［オブジェクト］をクリックします。 3. 次のダイアログボックスが表示されます。 4. [ファイルから作成]をクリックし、[参照]をクリックします。 5. 挿入する Excel テーブルを選択します。 6. [OK] をクリックすると、次のページが表示されます。 7. [アイコンで表示]にチェックを入れます。 8. 「OK」をクリックします。
iPhoneのホーム画面から削除を元に戻す方法
Apr 17, 2024 pm 07:37 PM
ホーム画面から重要なものを削除してしまい、元に戻そうとしていますか?さまざまな方法でアプリのアイコンを画面に戻すことができます。 iPhoneでホーム画面から削除を元に戻す方法 前述したように、iPhoneでこの変更を復元する方法はいくつかあります。方法 1 – App ライブラリのアプリ アイコンを置き換える App ライブラリから直接ホーム画面にアプリ アイコンを配置できます。ステップ 1 – 横にスワイプして、アプリ ライブラリ内のすべてのアプリを見つけます。ステップ 2 – 前に削除したアプリのアイコンを見つけます。ステップ 3 – アプリのアイコンをメインライブラリからホーム画面上の正しい場所にドラッグするだけです。これが応用図です
Win10 インプット メソッド アイコンが見つからない場合はどうすればよいですか? Win10 インプット メソッド アイコンが失われた後にそれを取得する方法は?
Feb 29, 2024 am 11:52 AM
Win10 入力メソッドのアイコンが失われた後、多くのユーザーはそれを回復する方法がわかりません。この記事では、ユーザーが Win10 の入力方式アイコンを取得できるようにする簡単な方法を紹介します。これにより、入力方式を簡単に切り替えて作業効率を向上させることができます。 1. 入力方法が表示されない理由 1. キーボード レイアウトの問題: 中国語から英語または他の言語に切り替えるなど、キーボード レイアウトを誤って切り替えると、入力方法が一時的に表示されなくなることがあります。 2. 入力方法の設定の問題: システム設定で、入力方法の表示モードをカスタマイズできます。設定を誤ると、入力方法が表示されなくなったり、非表示になったりすることがあります。 3. 入力メソッドのエラーまたはクラッシュ: 入力メソッド ソフトウェア自体にエラーまたはクラッシュが発生し、入力メソッドが正しく表示されない可能性があります。 2. インプットメソッドの呼び出し方法 方法 1: 1. [Win+] を押します。
win11でショートカットアイコンの矢印を非表示にする方法は？隠しメソッドの共有
May 09, 2024 pm 01:00 PM
多くのユーザーはデスクトップ上の小さなアイコンの矢印を非表示にすることに慣れていますが、どうすればよいでしょうか? win11 システムを例として、詳細なデモを行います。 Win11 アイコンの矢印の方法 1. ショートカット キー win+r を押し、「regedit」と入力し、[OK] をクリックします。 2. レジストリ エディタに入り、HKEY_CLASSES_ROOTlnkfile を開き、右側のウィンドウで lsShortcut 項目を選択します。 3. lsShortcut 項目を右クリックし、[削除] オプションをクリックして、lsShortcut を削除します。 4. 最後に、コンピュータを再起動すると、デスクトップ ショートカットの小さな矢印が消えていることがわかります。サードパーティ ツール: Xiaozhi Launcher Xiaozhi Launcher は、非常にフレンドリーで実用的なデスクトップ オーガナイザーです。
Google Chromeのアイコンを変更するにはどうすればよいですか? Google Chromeのアイコンを変更する方法
Mar 13, 2024 pm 08:50 PM
Google Chromeのアイコンを変更するにはどうすればよいですか? Google Chromeのデフォルトアイコンに飽きて別のアイコンに変更したいと考えているユーザーもいますが、Google Chromeでは設定するだけで無料のアイコン変更機能が提供されています。次に、Google Chromeのアイコンを変更する方法を編集者が共有しますので、興味のある方はぜひ試してみてください。変更方法: 1. デスクトップの Google Chrome ショートカットを見つけて、[右クリック] - [プロパティ] をクリックします。 2. 図のように[アイコンの変更]をクリックします。 3. 図に示すように、必要なアイコンを選択し、[OK] をクリックします。
jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか?
Feb 28, 2024 pm 03:12 PM
jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエスト メソッドを使用した具体的なコード例です。まず、jQuery ライブラリ ファイルが含まれていることを確認してから、$.ajax({u
win11の右下隅のアイコン間の距離が大きくなる問題を解決するにはどうすればよいですか?ソリューションのリスト
Jun 10, 2024 pm 03:47 PM
win11 システムでは、一部のユーザーが win11 の右下隅のアイコンの間隔が大きくなる問題に遭遇しました。この問題を解決するにはどうすればよいでしょうか。以下を見てみましょう！まず、Win11の設定インターフェイスを開く必要があります。タスクバーの「スタート」ボタンをクリックし、「設定」を選択します。設定インターフェイスで、「個人用設定」オプションを見つけて、「タスクバー」をクリックします。タスクバーの設定には、「アイコンの間隔」オプションがあります。最適なサイズに変更し、「適用」ボタンをクリックして設定を保存します。解決策は簡単ですが、注意する必要があることがいくつかあります。まず、アイコンの間隔を調整するときは、小さすぎるとアイコンが重なって使用に影響を与える可能性があるので、調整しすぎないように注意してください。第二に、もしあなたが
