


Buat awan tag dengan beberapa css mudah dan javascript yang lebih mudah
Apr 02, 2025 am 03:59 AMSaya selalu menyukai awan tag. Saya suka melihat tag mana yang merupakan pengalaman pengguna yang paling popular di laman web dengan melihat saiz fon relatif tag, dan tag popular lebih besar. Mereka seolah -olah sudah ketinggalan zaman, walaupun anda sering melihat versi mereka dalam ilustrasi alat seperti Wordle.
Betapa sukarnya membuat awan tag? Tidak sukar sama sekali. Mari lihat!
Mari mulakan dengan tanda
Untuk HTML kami, kami meletakkan setiap tag dalam senarai,<ul class="tags"></ul>
. Kami akan menyuntiknya menggunakan JavaScript. Ia akan menjadi lebih baik jika awan tag anda sudah ada di HTML dan anda hanya mahu melakukan sesuatu yang agak fon saiz! Secara beransur -ansur dipertingkatkan! Anda sepatutnya dapat tweak JavaScript kemudian untuk melakukan bahagian itu, tetapi tidak semestinya membina dan menyuntik tag itu sendiri.
Saya menandakan setiap atribut dengan beberapa artikel tertentu, mengejek beberapa data JSON. Mari tulis beberapa JavaScript untuk mendapatkan suapan JSON dan lakukan tiga perkara.
Pertama, kami akan membuat satu untuk setiap entri dalam senarai<li>
. Bayangkan HTML setakat ini seperti ini:
Kami kemudian meletakkan bilangan artikel setiap atribut yang ada dalam kurungan di sebelah setiap item senarai. Sekarang, tag kelihatan seperti ini:
Langkah ketiga dan terakhir, kami akan membuat pautan di sekitar setiap tag yang menunjuk ke lokasi yang betul. Di sini kita boleh menetapkan atribut saiz fon untuk setiap item berdasarkan bilangan artikel yang ditandakan untuk setiap atribut, jadi animasi dengan 13 artikel akan jauh lebih besar daripada warna latar belakang dengan hanya 1 artikel.
Bahagian JavaScript
Mari kita lihat kod JavaScript yang melakukan ini.
const dataUrl = "https://gist.githubusercontent.com/markconroy/536228ed416a551de8852b74615e5dd/raw/9b96c9049b10e7e18ee92222222222222222b4caf9167acb4efdd6/; const tags = document.QuerySelector (". Tags"); const fragment = document.CreatedOcumentFragment (); const maxFontsizeFortAg = 6; Ambil (DataUrl) .THEN (FUNGSI (RES) { kembali res.json (); }) .THEN (FUNGSI (DATA) { // 1. Buat array baru dari data biarkan orderedData = data.map ((x) => x); // 2. Sort dengan bilangan artikel per tag ordereddata.sort (fungsi (a, b) { kembali a.tagged_articles.length - b.tagged_articles.length; }); orderedData = orderedData.Reverse (); // 3. Dapatkan nilai tag dengan bilangan terbesar tag constValue = orderedData [0] .tagged_articles.length; // 4. Buat item senarai untuk setiap hasil dalam data. data.foreach ((hasil) => handleresult (hasil, nilai tertinggi)); // 5. Lampirkan senarai tag lengkap ke tag elemen tags.AppendChild (Fragment); // Tetap: serpihan harus dilampirkan di sini, bukan tag });
JavaScript di atas menggunakan API FETCH untuk mendapatkan URL tags.json yang diuruskan. Sebaik sahaja data ini diambil, ia mengembalikannya sebagai JSON. Di sini kita pergi ke array baru yang dipanggil OrderedData (jadi kita tidak akan mengubah array asal) dan mencari tag dengan jawatan yang paling banyak. Kami akan menggunakan nilai ini kemudian dalam skala fon supaya semua label lain mempunyai saiz fon yang berkaitan dengannya. Kemudian, untuk setiap hasil respons, kami memanggil fungsi yang saya namakan Handleresult () dan lulus hasil dan nilai tertinggi sebagai argumen kepada fungsi tersebut. Ia juga mencipta:
-
<li> Tag bernama pembolehubah yang akan kami gunakan untuk menyuntik setiap item senarai yang dibuat dari hasilnya,
<li> Pemboleh ubah untuk serpihan untuk memegang hasil setiap lelaran gelung, yang akan ditambah kepada tag kemudian, juga
<li> Pembolehubah untuk saiz fon maksimum, yang akan kami gunakan kemudian dalam skala fon.
Seterusnya ialah fungsi Handleresult (Hasil):
fungsi handleresult (hasil, nilai tertinggi) { // Tetapkan variable const name = result.title; const link = result.href; const numberOfarticles = result.tagged_articles.length; Biarkan fontSize = NumberOfarticles/HighestValue * MaxFontSizeFortAg; fontsize = fontsize.tOfixed (2); const fontsizeProperty = `$ {fontsize} em`; // Buat elemen senarai untuk setiap tag dan sejajar dengan saiz fon const tag = document.createElement ("li"); tag.classlist.add ("tag"); tag.innerHtml = ` <a href="http://m.miracleart.cn/link/72085ca61c54cb3316dcf4b61e0b198d" class="tag__link" style="font-size: ${fontSizeProperty}">$ {name} ($ {NumberOfarticles})</a> `; // Lampirkan setiap tag ke fragmen fragmen.AppendChild (tag); }
Kod ini lebih mudah dibaca dengan menetapkan beberapa pembolehubah sebelum kita mula membuat HTML. Ia juga menjadikan kod kami lebih kering, kerana kami boleh menggunakan pembolehubah NumberOfarticles di beberapa tempat.
Sebaik sahaja ini. Loopforeach mengembalikan setiap tag, mereka dikumpulkan ke dalam serpihan. Selepas itu, kami menggunakan AppendChild () untuk menambahkannya ke elemen tag. Ini bermakna DOM hanya dikendalikan sekali, tidak setiap kali gelung berjalan, yang merupakan peningkatan prestasi yang baik jika kita mempunyai banyak tag.
Font Zoom
Apa yang kita sekarang berfungsi hebat untuk kita dan kita boleh mula menulis CSS. Walau bagaimanapun, formula kami untuk pembolehubah fontsize bermakna bahawa kebanyakan tag (iaitu "flex" dengan 25) akan menjadi 6EM (25/25 6 = 6), tetapi hanya 1 pos akan mempunyai saiz tag 1/25 (1/25 6 = 0.24), menjadikan kandungan sukar dibaca. Jika kami mempunyai tag dengan 100 jawatan, tag yang lebih kecil akan menjadi lebih buruk (1 /100 * 6 = 0.06).
Untuk menyelesaikan ini, saya menambah satu pernyataan yang mudah yang menetapkan fontsize kepada 1 jika fontSize yang dikembalikan adalah kurang daripada 1. Jika tidak, simpan pada saiz semasa. Sekarang semua tag mempunyai saiz fon antara 1em dan 6em, dibulatkan ke dua tempat perpuluhan. Untuk meningkatkan saiz tag maksimum, hanya tukar nilai maxfontsizeforfortag. Anda boleh menentukan kaedah mana yang terbaik untuk anda berdasarkan jumlah kandungan yang anda hadapi.
fungsi handleresult (hasil, nilai tertinggi) { // Tetapkan pembolehubah const numberOfarticles = result.tagged_articles.length; const name = result.title; const link = result.href; Biarkan fontSize = NumberOfarticles/HighestValue * MaxFontSizeFortAg; fontsize = fontsize.tOfixed (2); // pastikan saiz fon sekurang -kurangnya 1em jika (fontsize $ {name} ($ {NumberOfarticles}) `; // Lampirkan setiap tag ke fragmen fragmen.AppendChild (tag); }
Ini CSS sekarang!
Kami menggunakan Flexbox untuk susun atur kerana setiap label mungkin mempunyai lebar yang berbeza. Kemudian kami memusatkan mereka dengan Kandungan Justify: Pusat dan keluarkan peluru senarai.
.tags { Paparan: Flex; Flex-Wrap: Bungkus; Justify-Content: Center; max-lebar: 960px; Margin: Auto; Padding: 2rem 0 1rem; Senarai gaya: Tiada; Sempadan: 2px Pepejal Putih; Radius sempadan: 5px; }
Kami juga akan menggunakan Flexbox untuk setiap tag. Ini membolehkan kita menyelaraskan mereka secara menegak menggunakan item Align-item: pusat, kerana ketinggian mereka berbeza-beza mengikut saiz fon.
.tag { Paparan: Flex; Align-item: pusat; Margin: 0.25rem 1rem; }
Setiap pautan dalam awan tag mempunyai padding, hanya untuk menjadikannya sedikit di luar saiz yang ketat untuk diklik.
.tag__link { Padding: 5px 5px 0; Peralihan: 0.3s; Teks-penyerapan: Tiada; }
Saya dapati ini sangat mudah di skrin kecil, terutamanya bagi mereka yang mungkin mengalami kesukaran mengklik pautan. Penghancuran teks awal telah dikeluarkan kerana saya fikir kita boleh mengandaikan bahawa setiap item teks dalam awan tag adalah pautan, jadi tidak perlu mempunyai hiasan khas untuk mereka.
Saya akan menambah beberapa warna untuk menjadikan gaya sedikit lebih cantik:
.tag: nth-of-type (4n 1) .tag__link { Warna: http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffd560; } .tag: nth-of-type (4n 2) .tag__link { Warna: http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bee4266; } .tag: nth-of-type (4n 3) .tag__link { Warna: http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b9e88f7; } .tag: nth-of-type (4n 4) .tag__link { Warna: http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54d0ff; }
Skema warna ini secara langsung dicuri dari pautan blog Chris, di mana setiap tag keempat dari permulaan tag satu kuning, setiap tag keempat dari permulaan tag dua adalah merah, setiap tag keempat dari permulaan tag tiga adalah ungu, dan setiap tag keempat dari permulaan tag empat adalah biru.
Kemudian kami menetapkan fokus dan melayang untuk setiap pautan:
.tag: nth-of-type (4n 1) .tag__link: fokus, .tag: nth-of-type (4n 1) .tag__link: hover { Box -Shadow: Inset 0 -1.3EM 0 0 http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffd560; } .tag: nth-of-type (4n 2) .tag__link: fokus, .tag: nth-of-type (4n 2) .tag__link: hover { Box -Shadow: Inset 0 -1.3EM 0 0 http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bee4266; } .tag: nth-of-type (4n 3) .tag__link: fokus, .tag: nth-of-type (4n 3) .tag__link: hover { Box -Shadow: Inset 0 -1.3EM 0 0 http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b9e88f7; } .tag: nth-of-type (4n 4) .tag__link: fokus, .tag: nth-of-type (4n 4) .tag__link: hover { Box -Shadow: Inset 0 -1.3em 0 0 http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54d0ff; }
Pada peringkat ini, saya mungkin telah mencipta pemboleh ubah tersuai untuk warna -contohnya -ini: http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffd560 dan lain Ini adalah sekeping kod kecil yang mencapai kesan yang lebih menarik daripada garis bawah atau sempadan bawah standard. Menggunakan unit EM di sini bermakna kita dapat mengawal saiz bayangan berbanding dengan teks yang perlu dilindungi.
Ok, mari kita tamat dengan menetapkan setiap pautan tag ke hitam:
.tag: nth-of-type (4n 1) .tag__link: fokus, .tag: nth-of-type (4n 1) .tag__link: hover, .tag: nth-of-type (4n 2) .tag__link: fokus, .tag: nth-of-type (4n 2) .tag__link: hover, .tag: nth-of-type (4n 3) .tag__link: fokus, .tag: nth-of-type (4n 3) .tag__link: hover, .tag: nth-of-type (4n 4) .tag__link: fokus, .tag: nth-of-type (4n 4) .tag__link: hover { Warna: Hitam; }
Kami sudah selesai! Inilah hasil akhir:
(Oleh kerana saya tidak mempunyai kod berjalan sebenar, saya tidak dapat memberikan screenshot awan tag akhir. Sila buat dan lihat hasilnya sendiri berdasarkan kod dan CSS yang disediakan.)
Atas ialah kandungan terperinci Buat awan tag dengan beberapa css mudah dan javascript yang lebih mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undress AI Tool
Gambar buka pakaian secara percuma

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

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)

Themaindifferencesbetweendisplay: inline, block, andinline-blockinhtml/cssarelayoutbehavior, spaceusage, andstylingcontrol.1.inlineelementsflowwithtext, notstartonNewlines, abaikanwidth/height, andonyapplylylylylylinddding/

Menetapkan gaya pautan yang telah anda lawati dapat meningkatkan pengalaman pengguna, terutama di laman web yang berintensifkan kandungan untuk membantu pengguna menavigasi lebih baik. 1. Gunakan CSS: Kelas pseudo yang dilawati untuk menentukan gaya pautan yang dikunjungi, seperti perubahan warna; 2. Perhatikan bahawa penyemak imbas hanya membenarkan pengubahsuaian beberapa atribut disebabkan oleh sekatan privasi; 3. Pemilihan warna harus diselaraskan dengan gaya keseluruhan untuk mengelakkan ketangkasan; 4. Terminal mudah alih mungkin tidak memaparkan kesan ini, dan disyorkan untuk menggabungkannya dengan arahan visual lain seperti logo tambahan ikon.

Gunakan atribut clip-path CSS untuk menanam unsur-unsur ke dalam bentuk tersuai, seperti segitiga, takik bulat, poligon, dan lain-lain, tanpa bergantung pada gambar atau SVG. Kelebihannya termasuk: 1. Menyokong pelbagai bentuk asas seperti Circle, Ellipse, Polygon, dan lain -lain; 2. Pelarasan responsif dan boleh disesuaikan dengan terminal mudah alih; 3. Mudah untuk animasi, dan boleh digabungkan dengan hover atau javascript untuk mencapai kesan dinamik; 4. Ia tidak menjejaskan aliran susun atur, dan hanya tanaman kawasan paparan. Penggunaan umum adalah seperti laluan klip bulat: bulatan (50pxatcenter) dan triangle clip-path: polygon (50%0%, 100 0%, 0 0%). Notis

Untuk membuat imej responsif menggunakan CSS, ia boleh dicapai terutamanya melalui kaedah berikut: 1. Gunakan maksimum lebar: 100% dan ketinggian: auto untuk membolehkan imej menyesuaikan diri dengan lebar kontena sambil mengekalkan perkadaran; 2. Gunakan atribut SRCSET dan saiz HTML dengan bijak memuatkan sumber imej yang disesuaikan dengan skrin yang berbeza; 3. Gunakan objek-sesuai dan kedudukan objek untuk mengawal penanaman imej dan paparan fokus. Bersama -sama, kaedah ini memastikan bahawa imej dibentangkan dengan jelas dan indah pada peranti yang berbeza.

Penyemak imbas yang berbeza mempunyai perbezaan dalam parsing CSS, mengakibatkan kesan paparan yang tidak konsisten, terutamanya termasuk perbezaan gaya lalai, kaedah pengiraan model kotak, flexbox dan tahap sokongan susun atur grid, dan tingkah laku yang tidak konsisten bagi atribut CSS tertentu. 1. Pemprosesan gaya lalai tidak konsisten. Penyelesaiannya adalah menggunakan cssreset atau normalisasi.css untuk menyatukan gaya awal; 2. Kaedah pengiraan model kotak versi lama IE adalah berbeza. Adalah disyorkan untuk menggunakan kotak-kotak: kotak sempadan dengan cara yang bersatu; 3. Flexbox dan grid melakukan secara berbeza dalam kes kelebihan atau dalam versi lama. Lebih banyak ujian dan gunakan autoprefixer; 4. Beberapa tingkah laku atribut CSS tidak konsisten. CANIUSE mesti dirujuk dan diturunkan.

Pilihan unit CSS bergantung kepada keperluan reka bentuk dan keperluan responsif. 1.PX digunakan untuk saiz tetap, sesuai untuk kawalan yang tepat tetapi kekurangan keanjalan; 2.EM adalah unit relatif, yang mudah disebabkan oleh pengaruh unsur induk, sementara REM lebih stabil berdasarkan unsur akar dan sesuai untuk skala global; 3.VW/VH didasarkan pada saiz viewport, sesuai untuk reka bentuk yang responsif, tetapi perhatian harus dibayar kepada prestasi di bawah skrin yang melampau; 4. Apabila memilih, ia harus ditentukan berdasarkan sama ada pelarasan responsif, hubungan hierarki elemen dan ketergantungan viewport. Penggunaan yang munasabah boleh meningkatkan fleksibiliti dan penyelenggaraan susun atur.

Opacity adalah atribut dalam CSS yang mengawal ketelusan keseluruhan elemen, dengan nilai dari 0 (sepenuhnya telus) hingga 1 (sepenuhnya legap). 1. Ia sering digunakan untuk kesan memudar imej, dan meningkatkan pengalaman interaktif dengan menetapkan peralihan kelegapan; 2. Membuat lapisan topeng latar untuk meningkatkan kebolehbacaan teks; 3. Maklum balas visual butang kawalan atau ikon dalam keadaan kurang upaya. Perhatikan bahawa ia memberi kesan kepada semua elemen kanak -kanak, tidak seperti RGBA, yang hanya mempengaruhi bahagian warna yang ditentukan. Animasi yang lancar boleh dicapai dengan peralihan, tetapi penggunaan yang kerap boleh menjejaskan prestasi. Adalah disyorkan untuk menggunakannya dalam kombinasi dengan perubahan atau perubahan. Aplikasi rasional kelegapan dapat meningkatkan hierarki halaman dan interaktiviti, tetapi ia harus mengelakkan campur tangan dengan pengguna.

Accent-color adalah atribut yang digunakan dalam CSS untuk menyesuaikan warna-warna sorot elemen bentuk seperti kotak pilihan, butang radio dan slider; 1. Ia secara langsung mengubah warna lalai keadaan yang dipilih dari kawalan borang, seperti menukar tanda semak biru kotak semak menjadi merah; 2. Unsur yang disokong termasuk kotak input Type = "Checkbox", Type = "Radio" dan Type = "Range"; 3. Menggunakan warna aksen boleh mengelakkan gaya tersuai kompleks dan struktur dom tambahan, dan mengekalkan kebolehcapaian asli; 4. Ia umumnya disokong oleh pelayar moden, dan pelayar lama perlu diturunkan; 5. Set Accent-Col
