JavaScript实现对选中框特效的制作
本文实例讲述了JS实现表单中checkbox对勾选中增加边框显示效果。分享给大家供大家参考。具体如下：
这里用JavaScript实现checkbox复选框选中效果，表单中的复选框效果，打对勾选中效果模拟，JS与HTML5相结合实现的美化效果。貌似目前比较流行的效果啦！
运行效果截图如下：
具体代码如下：
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; chaRset=gb2312" />
<title>JS实现单个图片选中美化框</title>
<style type="text/css">
body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset,
legend, input, button, textarea, blockquote, th, td, p { margin:0; padding:0 }
input, button, select, textarea { outline:none }
li { list-style:none }
img { vertical-align:top; border:none }
textarea { resize:none }
body { width:auto; height:auto; padding:0; margin:0; color: #666; background: #FFF; }
body, input, textarea { font-size:12px; font-family:Arial, Verdana, "Microsoft Yahei", Simsun }
a{cursor:pointer}
a:link{color:#37a;text-decoration:none}
a:visited{color:#669;text-decoration:none}
a:hover{color:#fff;text-decoration:none;background:#37a}
a:active{color:#fff;text-decoration:none;background:#f93}
.clear { clear:both }
.clearfix:after{ content:"."; display:block; font-size: 0; height:0; clear:both; visibility:hidden }
.clearfix{ zoom:1}
#radio_wrap{width: 916px; margin: 50px auto 0;font-size: 0;*word-spacing:-1px;}
@media screen and (-webkit-min-device-pixel-ratio:0){
#radio_wrap{letter-spacing:-4px;}}
#radio_wrap input{display: none;}
#radio_wrap li{position:relative; width: 223px; height: 259px; border: 1px solid #CCC; display:inline-block; *display:inline; *zoom:1; margin:0 2px;}
#radio_wrap li.checked{border:2px solid red;margin:-1px 1px;}
#radio_wrap li.checked i{width:30px; height:30px; position:absolute; right:0; bottom:0;_right:-1px; _bottom:-1px;background:url(images/checked.gif) no-repeat;}
</style>
</head>
<body>
<p id="radio_wrap">
<ul>
<li class="c checked">
<input type="radio" id="radio_a_01" name="radio_a" />
<label for="radio_a_01"><img src="images/taobao2.jpg" alt="" disabled/></label>
<i></i>
</li>
<li class="c">
<input type="radio" id="radio_a_02" name="radio_a" />
<label for="radio_a_02"><img src="images/taobao2.jpg" alt="" disabled/></label>
<i></i>
</li>
</ul>
</p>
<script type="text/javascript">
(function() {
var radioWrap = document.getElementById("radio_wrap"),
li = radioWrap.getElementsByTagName("li");
for(var i = 0; i < li.length; i++){
li[i].onclick = function() {
for(var i = 0; i < li.length; i++){
li[i].className = "";
}
this.className = "checked";
}
}
})();
</script>
<p style="text-align:center;clear:both"><br>
</p>
</body>
</html>希望本文所述对大家的javascript程序设计有所帮助。
Atas ialah kandungan terperinci JavaScript实现对选中框特效的制作. 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
1386
52
Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik
Apr 03, 2024 am 11:55 AM
Teknologi pengesanan dan pengecaman muka adalah teknologi yang agak matang dan digunakan secara meluas. Pada masa ini, bahasa aplikasi Internet yang paling banyak digunakan ialah JS Melaksanakan pengesanan muka dan pengecaman pada bahagian hadapan Web mempunyai kelebihan dan kekurangan berbanding dengan pengecaman muka bahagian belakang. Kelebihan termasuk mengurangkan interaksi rangkaian dan pengecaman masa nyata, yang sangat memendekkan masa menunggu pengguna dan meningkatkan pengalaman pengguna termasuk: terhad oleh saiz model, ketepatannya juga terhad. Bagaimana untuk menggunakan js untuk melaksanakan pengesanan muka di web? Untuk melaksanakan pengecaman muka di Web, anda perlu biasa dengan bahasa dan teknologi pengaturcaraan yang berkaitan, seperti JavaScript, HTML, CSS, WebRTC, dll. Pada masa yang sama, anda juga perlu menguasai visi komputer yang berkaitan dan teknologi kecerdasan buatan. Perlu diingat bahawa kerana reka bentuk bahagian Web
Kaedah khusus untuk mencipta kesan pergerakan filem dalam PPT
Mar 26, 2024 pm 04:00 PM
1. Mulakan PPT, buat dokumen kosong baharu, pilih semua kotak teks dan padamkannya. 2. Jalankan arahan Sisip-Bentuk, seret segi empat tepat dalam dokumen dan isikan bentuk dengan hitam. 3. Seret segi empat tepat untuk memanjangkannya, laksanakan arahan Sisip-Bentuk, seret keluar segi empat sama kecil, dan tetapkan warna isian kepada putih. 4. Salin dan tampal petak kecil satu demi satu supaya bahagian atas dan bawah diagihkan sama rata pada kedua-dua belah filem Selepas memilih semuanya dengan ctrl+a, klik kanan dan pilih Kumpulan. 5. Jalankan arahan Insert-Picture, cari gambar yang hendak disisipkan dalam kotak dialog pop timbul, klik untuk membuka, dan laraskan saiz dan kedudukan gambar. 6. Ulangi langkah 5 untuk memasukkan dan menetapkan gambar yang tinggal untuk membentuk gambar filem. 7. Pilih filem, laksanakan arahan animasi-tambah animasi
Cara membuat kulit novel tomato
Feb 23, 2024 pm 01:55 PM
Bagaimana cara membuat kulit novel Tomato? Anda boleh membuat kulit novel eksklusif dalam novel Tomato, tetapi kebanyakan rakan tidak tahu cara membuat kulit novel Tomato Seterusnya adalah gambar cara membuat kulit novel Tomato yang dibawakan editor kepada pemain Tutorial, pemain yang berminat datang dan lihat! Tutorial penggunaan Novel Tomato Cara membuat kulit Novel Tomato 1. Mula-mula buka APP Novel Tomato, masukkan halaman pengurusan kerja untuk membuat buku baharu, dan pilih [Templat Kulit] seperti yang ditunjukkan oleh anak panah dalam gambar di bawah 2. Kemudian masukkan halaman templat muka depan dan pilih Templat muka depan kegemaran anda 3. Selepas memilih penutup, klik [Sahkan] di sudut kanan atas.
Panduan operasi untuk membuat jadual Excel mudah alih
Feb 18, 2024 pm 02:41 PM
Tutorial penciptaan jadual Excel Mudah Alih Dengan populariti peranti mudah alih dan kemajuan teknologi yang berterusan, telefon mudah alih telah menjadi salah satu alat yang amat diperlukan dalam kehidupan dan kerja harian kita. Menggunakan hamparan Excel pada telefon mudah alih anda boleh merekod, mengira dan menganalisis data dengan mudah serta meningkatkan kecekapan kerja. Artikel ini akan berkongsi dengan anda operasi asas dan teknik untuk mencipta jadual Excel mudah alih. 1. Pilih aplikasi yang betul Terdapat banyak aplikasi Excel mudah alih di pasaran untuk dipilih, seperti GoogleSheets, Micro
Petua Pembangunan PHP dan JS: Kuasai Kaedah Melukis Carta Lilin Stok
Dec 18, 2023 pm 03:39 PM
Dengan perkembangan pesat kewangan Internet, pelaburan saham telah menjadi pilihan semakin ramai orang. Dalam perdagangan saham, carta lilin adalah kaedah analisis teknikal yang biasa digunakan Ia boleh menunjukkan trend perubahan harga saham dan membantu pelabur membuat keputusan yang lebih tepat. Artikel ini akan memperkenalkan kemahiran pembangunan PHP dan JS, membawa pembaca memahami cara melukis carta lilin saham dan menyediakan contoh kod khusus. 1. Memahami Carta Lilin Saham Sebelum memperkenalkan cara melukis carta lilin saham, kita perlu memahami dahulu apa itu carta lilin. Carta candlestick telah dibangunkan oleh orang Jepun
Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP
Jan 05, 2024 pm 06:08 PM
Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest
Hubungan antara js dan vue
Mar 11, 2024 pm 05:21 PM
Hubungan antara js dan vue: 1. JS sebagai asas pembangunan Web; 2. Kebangkitan Vue.js sebagai rangka kerja hadapan 3. Hubungan pelengkap antara JS dan Vue; Vue.
Biar saya ajar awak! Bagaimana untuk mencipta kesan animasi dalam PPT!
Mar 20, 2024 pm 06:40 PM
Apabila membuat PPT, menggunakan beberapa kesan animasi akan menjadikannya lebih meriah dan comel berbanding tanpa menggunakan kesan animasi Dengan penambahan kesan animasi, orang ramai mungkin suka menonton PPT ini, jadi kita mesti belajar bagaimana untuk mencipta kesan animasi untuk PPT. Seterusnya, saya akan memperkenalkan secara terperinci cara menambah kesan animasi pada PPT. Sila teruskan membaca dan mengkaji langkah-langkah ini dengan teliti, saya percaya ia akan membantu anda! Mula-mula, buka PPT yang kami buat sendiri Anda akan perasan bahawa PPT ini pada masa ini tidak mempunyai sebarang kesan animasi (seperti yang ditunjukkan oleh anak panah merah dalam rajah di bawah). 2. Kemudian, kita perlu menambah kesan animasi pada gambar Kita mula-mula memilih gambar, dan kemudian klik butang [Animasi] di bahagian atas bar menu (seperti yang ditunjukkan dalam bulatan merah dalam rajah di bawah). 3. Seterusnya, kita klik di dalam animasi
