JS实现单个图片选中美化框特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 JS实现单个图片选中美化框特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; chaRset=gb2312" />
	<title>JS实现单个图片选中美化框</title>
	<link rel="stylesheet" href="css/base.css"/>
	<style type="text/css">
	</style>
</head>
<body>
<div 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/taobao1.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>
		<li class="c">
			<input type="radio" id="radio_a_03" name="radio_a" />
			<label for="radio_a_03"><img src="images/taobao3.jpg" alt="" disabled/></label>
			<i></i>
		</li>
		<li class="c">
			<input type="radio" id="radio_a_04" name="radio_a" />
			<label for="radio_a_04"><img src="images/taobao4.jpg" alt="" disabled/></label>
			<i></i>
		</li>
	</ul>
</div>
<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>
</body>
</html>

CSS代码(base.css):

/* CSS Reset */
body,div,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(../bg/checked.gif) no-repeat;}

附件:下载该文件资源,减少时间成本(增值服务)