kesan pilihan gelongsor jQuery
<style type="text/css">
.demo { pelapik: 2em 0; latar belakang: #fff; }
a:hover, a:focus { outline: none; hiasan teks: tiada; }
.tab .nav-tabs { border-bottom: none; kedudukan: relatif; }
.tab .nav-tabs li { margin-kanan: 60px; indeks-z: 1; }
.tab .nav-tabs li:selepas { kandungan: ""; lebar: 100%; sempadan: 1px pepejal #ccc6c6; jawatan: mutlak; atas: 50%; kanan: -60%; indeks-z: -1; }
.tab .nav-tabs li:last-child:after { border: none; }
.tab .nav-tabs li a { paparan: blok; padding: 15px 20px; latar belakang: #fff; saiz fon: 15px; berat fon: 600; warna: #956cae; text-transform: huruf besar; jejari sempadan: 0; margin-kanan: 0; sempadan: 2px pepejal #956cae; kedudukan: relatif; limpahan: tersembunyi; indeks-z: 1; peralihan: semua 0.3s memudahkan 0s; }
.tab .nav-tabs li.active a, .tab .nav-tabs li a:hover { color: #fff; sempadan: 2px pepejal #956cae; }
.tab .nav-tabs li a:selepas { kandungan: ""; paparan: blok; lebar: 100%; ketinggian: 0; jawatan: mutlak; atas: 0; kiri: 0; indeks-z: -1; peralihan: semua 0.3s memudahkan 0s; }
.tab .nav-tabs li.active a:after, .tab .nav-tabs li a:hover:after { ketinggian: 100%; latar belakang: #956cae; }
.tab .tab-content { padding: 20px 10px; jidar atas: 0; saiz fon: 14px; warna: #999; ketinggian garis: 26px; }
.tab .tab-kandungan h3 { saiz fon: 24px; jidar atas: 0; }
Skrin @media sahaja dan (lebar maksimum: 767px) {
.tab .nav-tabs li { margin: 0 25px 0 0; }
}
Skrin @media sahaja dan (lebar maksimum: 479px) {
.tab .nav-tabs li { lebar: 100%; text-align: tengah; jidar: 0 0 10px 0; }
.tab .nav-tabs li:selepas { lebar: 0; ketinggian: 100%; atas: auto; bawah: -60%; kanan: 50%; }
}
</style>
这是一款基于jQuery+Bootstrap实现的滑动选项卡代码,简洁扁平风格个性选项卡切换物卡切换片有动画效果。
Semua sumber di laman web ini disumbangkan oleh netizen atau dicetak semula oleh tapak muat turun utama. Sila semak integriti perisian itu sendiri! Semua sumber di laman web ini adalah untuk rujukan pembelajaran sahaja. Tolong jangan gunakannya untuk tujuan komersial. Jika tidak, anda akan bertanggungjawab untuk semua akibat! Jika terdapat sebarang pelanggaran, sila hubungi kami untuk memadamkannya. Maklumat hubungan: admin@php.cn
Artikel Berkaitan
19 Sep 2023
Cara menggunakan Vue untuk melaksanakan kesan pensuisan gelongsor kiri dan kanan Vue ialah rangka kerja JavaScript popular yang digunakan secara meluas untuk membina antara muka pengguna. Apabila membangunkan aplikasi web responsif, selalunya perlu untuk melaksanakan pelbagai kesan khas untuk meningkatkan pengalaman pengguna. Antaranya, gelongsor ke kiri dan kanan untuk menukar kesan khas adalah keperluan biasa Artikel ini akan memperkenalkan cara menggunakan Vue untuk mencapai kesan khas ini dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan perpustakaan dan komponen yang berkaitan ke dalam projek Vue. Dalam contoh ini kita akan menggunakan VueRouter dan V
16 May 2016
Artikel ini terutamanya memperkenalkan kod JS untuk melaksanakan kesan menu gelongsor Ia melaksanakan kesan termasuk Tab, tab, mendatar dan kesan lain dalam bentuk contoh. Rakan yang memerlukannya boleh merujuknya.
28 May 2023
Dengan populariti Internet mudah alih, gambar telah menjadi salah satu elemen yang sangat diperlukan dalam reka bentuk web. Untuk pemprosesan kesan khas imej, jQuery telah menjadi salah satu alat yang biasa digunakan dalam kalangan pembangun. Artikel ini akan memperkenalkan beberapa teknik dan kaedah untuk menggunakan jQuery untuk mencapai pemprosesan kesan khas imej, untuk membantu anda menggunakan sepenuhnya jQuery dalam reka bentuk web. 1. Kesan khas alih tetikus Kesan khas alih tetikus ialah kaedah pemprosesan imej biasa, yang boleh menghasilkan beberapa kesan dinamik apabila tetikus melepasi imej, seperti terbalik imej, imej kabur, dsb. Kod berikut boleh membantu anda melaksanakan yang mudah
20 Sep 2023
Cara menggunakan Vue untuk melaksanakan kesan buka kunci gelongsor Dalam aplikasi web moden, kita sering melihat pelbagai kesan buka kunci gelongsor. Slaid untuk membuka kunci kesan khas ialah cara untuk mencapai interaksi pengguna dengan meluncur halaman atau elemen untuk mencapai tujuan tertentu, seperti membuka kunci dan menyeret peluncur, menukar halaman, dsb. Dalam artikel ini, kami akan membincangkan cara menggunakan rangka kerja Vue untuk melaksanakan slaid untuk membuka kunci kesan dan memberikan contoh kod khusus. Buat projek Vue Pertama, kita perlu mencipta projek Vue. Vue.js menyediakan vue alat perancah
16 May 2016
Artikel ini terutamanya memperkenalkan kesan khas animasi jQuery, dan menerangkan secara terperinci kaedah pelaksanaan kesan khas animasi jQuery Ia sangat praktikal. Rakan yang memerlukannya boleh merujuknya.
23 May 2023
Dengan populariti Internet, aplikasi kesan menaip menjadi semakin meluas, dan kesan menaip jquery telah menjadi pilihan pertama banyak pembangun laman web. Walau bagaimanapun, dalam proses merealisasikan kesan khas ini, isu terperinci sering menjejaskan pengalaman pengguna, seperti masalah pemadaman kesan khas menaip. Artikel ini akan memperkenalkan cara menggunakan kesan menaip jquery untuk menghentikan pemadaman dan meningkatkan pengalaman menyemak imbas pengguna. Pelaksanaan kesan menaip jquery boleh menggunakan pemalam siap pakai, seperti typed.js dan jQuery.Typewriter. Pemalam ini adalah berdasarkan jquery
25 Apr 2023
Dengan perkembangan teknologi Internet yang berterusan, reka bentuk halaman web telah menjadi lebih dan lebih berwarna Menggunakan jQuery dan CSS, anda boleh mencapai pelbagai kesan khas untuk menjadikan halaman web lebih cantik dan menarik. Artikel ini akan memperkenalkan beberapa kesan pelaksanaan menggunakan jQuery dan CSS dalam reka bentuk web. 1. Kesan karusel imej Dalam halaman web, imej karusel ialah kesan khas biasa dan boleh digunakan untuk memaparkan produk, iklan, dsb. Banyak kesan karusel yang berbeza boleh dibuat melalui jQuery dan CSS, seperti gelongsor kiri dan kanan, pudar masuk dan pudar, zum dan kesan lain. Di bawah adalah gambar yang melaksanakan gelongsor kiri dan kanan
16 May 2016
Imej memaparkan kod kesan khas berdasarkan jQuery Apabila tetikus dialihkan ke atas imej dan melayang, ia secara automatik akan bertukar kepada paparan teks yang ringkas Ia sesuai untuk memaparkan koleksi gambar dan disyorkan kepada semua orang.
16 May 2016
Artikel ini terutamanya memperkenalkan jQuery untuk melaksanakan kesan khas akordion dengan tekstur strim kaca Ia adalah kesan khas akordion berdasarkan jQuery CSS3. Saya harap anda menyukainya.
Hot Tools
jQuery+Html5 merealisasikan kod animasi pengakuan yang indah
jQuery+Html5 melaksanakan kod animasi pengakuan yang indah, kesan animasi yang hebat, yang mesti dimiliki oleh pengaturcara untuk mengaku!
Kod kesan khas js pengakuan romantik pasangan
Kod kesan khas JS untuk pengakuan romantis pasangan Kesan khas tersebut boleh digunakan pada laman web fotografi perkahwinan atau diletakkan di laman web peribadi Ia juga merupakan kesan khas yang disyorkan untuk dimuat turun.
Artifak pengakuan cinta js mudah
Artifak pengakuan cinta js asli yang mudah
Kesan ekspresif animasi zarah html5 Bunker
Kod kesan khas ungkapan animasi zarah html5 Bunker, teks kesan khas animasi boleh ditukar dalam kod, anda boleh membuat halaman di mana anda boleh menyesuaikan input teks, ia sepatutnya sangat popular, kesan khas HTML5 ini sangat cantik.
templat antara muka log masuk latar belakang responsif jQuery
jQuery responsif log masuk templat kod sumber html Halaman log masuk menggunakan jquery untuk mengesahkan borang dan menentukan sama ada nama pengguna dan kata laluan memenuhi keperluan Biasanya halaman log masuk adalah halaman yang mesti digunakan pada laman web korporat atau laman web pusat membeli-belah halaman, Apabila pelayar mengezum masuk atau keluar, latar belakang akan mengubah saiz imej mengikut pelayar! Laman web PHP Cina mengesyorkan muat turun!