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中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci jQuery做出圆形图标菜单轮流切换功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Bagaimana untuk melumpuhkan pratonton lakaran kecil bar tugas dalam Win11 Matikan teknik lakaran kecil paparan ikon bar tugas dengan menggerakkan tetikus
Feb 29, 2024 pm 03:20 PM
Artikel ini akan memperkenalkan cara untuk mematikan fungsi lakaran kenit yang dipaparkan apabila tetikus menggerakkan ikon bar tugas dalam sistem Win11. Ciri ini dihidupkan secara lalai dan memaparkan lakaran kecil tetingkap semasa aplikasi apabila pengguna menuding tetikus pada ikon aplikasi pada bar tugas. Walau bagaimanapun, sesetengah pengguna mungkin mendapati ciri ini kurang berguna atau mengganggu pengalaman mereka dan ingin mematikannya. Lakaran kecil bar tugas boleh menjadi menyeronokkan, tetapi ia juga boleh mengganggu atau menjengkelkan. Memandangkan kekerapan anda menuding di atas kawasan ini, anda mungkin telah menutup tetingkap penting secara tidak sengaja beberapa kali. Kelemahan lain ialah ia menggunakan lebih banyak sumber sistem, jadi jika anda telah mencari cara untuk menjadi lebih cekap sumber, kami akan menunjukkan kepada anda cara untuk melumpuhkannya. tetapi
Bagaimana untuk memasukkan ikon excel ke dalam slaid PPT
Mar 26, 2024 pm 05:40 PM
1. Buka PPT dan putar halaman ke halaman di mana anda perlu memasukkan ikon excel. Klik tab Sisipkan. 2. Klik [Objek]. 3. Kotak dialog berikut akan muncul. 4. Klik [Buat daripada fail] dan klik [Semak imbas]. 5. Pilih jadual excel yang hendak disisipkan. 6. Klik OK dan halaman berikut akan muncul. 7. Tandakan [Show as icon]. 8. Klik OK.
Bagaimana untuk membuat asal Padam dari Skrin Utama dalam iPhone
Apr 17, 2024 pm 07:37 PM
Memadamkan sesuatu yang penting daripada skrin utama anda dan cuba mendapatkannya semula? Anda boleh meletakkan ikon apl kembali pada skrin dalam pelbagai cara. Kami telah membincangkan semua kaedah yang boleh anda ikuti dan meletakkan semula ikon aplikasi pada skrin utama Cara Buat Asal Alih Keluar dari Skrin Utama dalam iPhone Seperti yang kami nyatakan sebelum ini, terdapat beberapa cara untuk memulihkan perubahan ini pada iPhone. Kaedah 1 – Gantikan Ikon Apl dalam Pustaka Apl Anda boleh meletakkan ikon apl pada skrin utama anda terus daripada Pustaka Apl. Langkah 1 – Leret ke sisi untuk mencari semua apl dalam pustaka apl. Langkah 2 – Cari ikon apl yang anda padamkan sebelum ini. Langkah 3 – Hanya seret ikon apl dari pustaka utama ke lokasi yang betul pada skrin utama. Ini adalah gambar rajah aplikasi
Bagaimana untuk menyembunyikan anak panah ikon pintasan dalam win11? Perkongsian kaedah tersembunyi
May 09, 2024 pm 01:00 PM
Ramai pengguna terbiasa menyembunyikan anak panah ikon kecil pada desktop, jadi bagaimana mereka harus melakukannya? Mari kita ambil sistem win11 sebagai contoh untuk memberi anda demonstrasi terperinci: Kaedah anak panah ikon Win11 1. Tekan kekunci pintasan win+r, masukkan regedit, dan klik OK. 2. Masukkan editor pendaftaran, buka: HKEY_CLASSES_ROOTlnkfile, dan pilih item lsShortcut dalam tetingkap kanan. 3. Klik kanan item lsShortcut, klik pilihan Delete, dan delete lsShortcut. 4. Akhir sekali, mulakan semula komputer dan anda akan melihat bahawa anak panah kecil pintasan desktop hilang. Alat pihak ketiga: Pelancar Xiaozhi Pelancar Xiaozhi ialah penganjur desktop yang sangat mesra dan praktikal.
Apakah yang perlu saya lakukan jika ikon kaedah input Win10 tiada Bagaimana untuk mendapatkan semula ikon kaedah input Win10 selepas ia hilang?
Feb 29, 2024 am 11:52 AM
Selepas ikon kaedah input Win10 hilang, ramai pengguna tidak tahu cara mendapatkannya semula. Artikel ini akan memperkenalkan kaedah mudah untuk membantu pengguna mendapatkan semula ikon kaedah input Win10, membolehkan anda menukar kaedah input dengan mudah dan meningkatkan kecekapan kerja. 1. Sebab kaedah input hilang 1. Masalah susun atur papan kekunci: Jika anda menukar susun atur papan kekunci secara tidak sengaja, seperti menukar daripada bahasa Cina ke bahasa Inggeris atau bahasa lain, kaedah input mungkin hilang buat sementara waktu. 2. Masalah tetapan kaedah input: Dalam tetapan sistem, kita boleh menyesuaikan mod paparan kaedah input. Tetapan yang tidak betul boleh menyebabkan kaedah input tidak dapat dipaparkan atau disembunyikan. 3. Ralat atau ranap kaedah input: Perisian kaedah input itu sendiri mungkin mempunyai ralat atau ranap, menyebabkan kaedah input gagal dipaparkan dengan betul. 2. Cara memanggil kaedah input Kaedah 1: 1. Tekan [Win+
Bagaimana untuk menukar ikon Google Chrome? Bagaimana untuk menukar ikon Google Chrome
Mar 13, 2024 pm 08:50 PM
Bagaimana untuk menukar ikon Google Chrome? Sesetengah pengguna bosan dengan ikon lalai Google Chrome dan ingin menukarnya kepada yang lain Google Chrome menyediakan pengguna dengan fungsi pengubahsuaian ikon percuma, yang hanya perlu ditetapkan. Seterusnya, editor akan berkongsi kaedah mengubah suai ikon Google Chrome Jika anda berminat, datang dan mencubanya. Cara menukar: 1. Cari pintasan Google Chrome desktop dan klik [klik kanan] - [Properties]. 2. Klik [Tukar Ikon], seperti yang ditunjukkan dalam rajah. 3. Pilih ikon yang anda perlukan dan klik [OK], seperti yang ditunjukkan dalam gambar.
Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery?
Feb 28, 2024 pm 03:12 PM
Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Dalam jQuery, kaedah menghantar permintaan PUT adalah serupa dengan menghantar jenis permintaan lain, tetapi anda perlu memberi perhatian kepada beberapa butiran dan tetapan parameter. Permintaan PUT biasanya digunakan untuk mengemas kini sumber, seperti mengemas kini data dalam pangkalan data atau mengemas kini fail pada pelayan. Berikut ialah contoh kod khusus menggunakan kaedah permintaan PUT dalam jQuery. Mula-mula, pastikan anda memasukkan fail perpustakaan jQuery, kemudian anda boleh menghantar permintaan PUT melalui: $.ajax({u
Bagaimana untuk menyelesaikan masalah bahawa jarak antara ikon di sudut kanan bawah win11 menjadi lebih besar? Senarai penyelesaian
Jun 10, 2024 pm 03:47 PM
Di bawah sistem win11, sesetengah pengguna menghadapi masalah jarak ikon di sudut kanan bawah win11 menjadi lebih besar. Mari lihat di bawah! Pertama, kita perlu membuka antara muka tetapan Win11. Klik butang Mula pada bar tugas dan pilih Tetapan. Dalam antara muka tetapan, cari pilihan "Pemperibadian" dan klik "Bar Tugas." Dalam tetapan bar tugas, kita boleh melihat pilihan "Icon Spacing". Ubah saiznya agar sesuai dengan anda dan klik butang Guna untuk menyimpan tetapan. Penyelesaiannya mudah, tetapi ada beberapa perkara yang perlu kita ambil perhatian. Pertama sekali, semasa melaraskan jarak ikon, berhati-hati agar tidak melaraskannya terlalu kecil, jika tidak, ikon mungkin bertindih dan menjejaskan penggunaan. Kedua, jika anda
