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程序设计有所帮助。
以上是JavaScript实现对选中框特效的制作的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++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、选择胶卷，执行动画-添加动画命
番茄小说封面怎么制作
Feb 23, 2024 pm 01:55 PM
番茄小说封面怎么制作?番茄小说中是可以制作专属的小说封面，但是多数的小伙伴不知道番茄小说当中的封面该如何的制作，接下来就是小编为玩家带来的番茄小说封面制作方法图文教程，感兴趣的玩家快来一起看看吧！番茄小说使用教程番茄小说封面怎么制作1、首先打开番茄小说APP，进入到作品管理页面创建新书，选择下图箭头所示的【封面模板】;2、然后进入到封面模板页面，选择喜爱的封面模板;3、最后选择封面完成之后点击右上角【确认】即可。
创建手机端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的开发技巧，带领读者了解如何绘制股票蜡烛图，并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前，我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人
简易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的实践应用。
我来教你！PPT制作动画效果的方法！
Mar 20, 2024 pm 06:40 PM
制作PPT的时候使用一些动画效果会比没有使用动画效果的显得活泼可爱，加上动画效果大家也许就喜欢看这个PPT，所以我们必须要学会PPT制作动画效果的方法。接下来，我将为大家详细介绍如何在PPT中添加动画效果。请继续往下阅读，认真学习这些步骤，相信对你会有所帮助！首先，打开我们自己制作的PPT，您会注意到这个PPT目前没有任何动画效果（如下图红色箭头所示）。2.然后，我们需要给图片添加动画效果，我们先选中图片，再单击菜单栏上边的【动画】按钮，（如下图红色圈出部分所示）。3.接下来，我们点击动画里边的
