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="/static/imghw/default1.png" data-src="images/taobao2.jpg" class="lazy" 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="/static/imghw/default1.png" data-src="images/taobao2.jpg" class="lazy" 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程式設計有所幫助。
以上是JavaScript實作對選取框特效的製作的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
建議：優秀JS開源人臉偵測辨識項目
Apr 03, 2024 am 11:55 AM
人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計
PPT製作膠卷移動效果的具體方法
Mar 26, 2024 pm 04:00 PM
1、啟動PPT，新建一個空白文檔，選擇所有的文字方塊將其刪除。 2、執行插入-形狀指令，在文件中拖曳出一個長方形，形狀顏色填滿為黑色。 3.拖曳長方形將其拉長，執行插入-形狀指令，拖曳出小正方形，設定填滿顏色為白色。 4.依序複製黏帖小正方形，使上下均勻分佈在膠卷兩側，ctrl+a選擇所有的之後，右鍵點選選擇組合。 5.執行插入-圖片指令，在彈出的對話框中找到需插入的圖片，點選打開，調整圖片大小和位置。 6.重複步驟5依序將其餘的圖片進行插入並設置，形成一個膠卷圖片的形式。 7.選擇膠卷，執行動畫-新增動畫命
建立手機端Excel表格操作指南
Feb 18, 2024 pm 02:41 PM
手機Excel表格製作教學隨著行動裝置的普及和技術的不斷進步，手機成為了我們日常生活和工作中不可或缺的工具之一。在手機上使用Excel表格，可以輕鬆進行資料記錄、計算和分析，提高工作效率。本文將為大家分享手機Excel表格製作的基本操作與技巧。一、選擇合適的應用程式目前市面上有許多可供選擇的手機Excel應用程序，例如GoogleSheets、Micro
PHP與JS開發技巧：掌握繪製股票蠟燭圖的方法
Dec 18, 2023 pm 03:39 PM
隨著網路金融的快速發展，股票投資已經成為了越來越多人的選擇。而在股票交易中，蠟燭圖是常用的技術分析方法，它能夠顯示股票價格的變動趨勢，幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧，帶領讀者了解如何繪製股票蠟燭圖，並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前，我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人
番茄小說封面怎麼製作
Feb 23, 2024 pm 01:55 PM
番茄小說封面怎麼製作?番茄小說中是可以製作專屬的小說封面，但是多數的小伙伴不知道番茄小說當中的封面該如何的製作，接下來就是小編為玩家帶來的番茄小說封面製作方法圖文教程，有興趣的玩家快來一起看看吧！番茄小說使用教學番茄小說封面怎麼製作1、先打開番茄小說APP，進入到作品管理頁面創建新書，選擇下圖箭頭所示的【封面模板】;2、然後進入到封面模板頁面，選擇喜愛的封面模板;3、最後選擇封面完成後點選右上角【確認】即可。
簡易JavaScript教學：取得HTTP狀態碼的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest
js和vue的關係
Mar 11, 2024 pm 05:21 PM
js和vue的關係：1、JS作為Web開發基石；2、Vue.js作為前端框架的崛起；3、JS與Vue的互補關係；4、JS與Vue的實踐應用。
如何在JavaScript中取得HTTP狀態碼的簡單方法
Jan 05, 2024 pm 01:37 PM
JavaScript中的HTTP狀態碼取得方法簡介：在進行前端開發中，我們常常需要處理與後端介面的交互，而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法，並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時，服務
