1.<input type="checkbox" class="style-choose" name="style" id="designStyle" value="simple" />
<label for="designStyle" class="label-item">
XXXXXX
</label>
实现思路:
(1)在input设置id,然后在label标签设置for属性指向input的id;
(2)将复选框设置为display:none,input[type="checkbox"]{display:none;}
(3)在label标签以内实现具体的图片或者内容(用xxxx代替)
(4)当复选框为checked状态下实现label标签被选中的状态和动画效果;
例子:(PS,html具体使用angular.js实现遍历添加)
html代码:
<!--在这里添加内容-->
<article class="research-table">
<!--表单-->
<form>
<!--表单选项-->
<ol class="research-items" id="slider">
<li ng-repeat="item in hobbyData.imgArr track by item.id">
<label>Q{{item.id}}、{{item.que}}</label>
<div class="pic-style-choose">
<span class="dis-in-block child-item" ng-repeat="list in item.items">
<input type="{{item.checkType}}" class="style-choose" name="{{item.name}}" id="{{list.itemId}}" value="{{list.value}}" ng-model="params.designStyle"/>
<label for="{{list.itemId}}" class="label-item">
<a class="item-wrapper dis-in-block" >
<img class="enlarge-img" ng-src="{{list.imgUrl}}" name="{{list.enlargeImg}}" />
<span class="mask-layer dis-in-block">
<i></i>
</span>
<span class="dis-in-block btn-enlarge" on-tap="getPic($event)" data-img="{{list.imgUrl}}">
<i></i>
</span>
</a>
</label>
</span>
</div>
</li>
<li ng-repeat="item in hobbyData.commonArr track by item.id">
<label>Q{{item.id}}、{{item.que}}</label>
<div>
<span class="child-item" ng-repeat="list in item.items">
<input class="check-box" id="{{list.itemId}}" type="{{item.checkType}}" name="{{item.name}}" value="{{list.value}}" ng-click="getCheckboxItem(item.id,list.itemId,$event)"/>
<label for="{{list.itemId}}" class="label-item">
<a class="is-nochecked"></a>
<span class="item-name">{{list.des}}</span>
</label>
</span>
</div>
</li>
</ol>
</form>
</article>
.research-table .research-items>li>label{
display:inline-block;
margin-bottom:15px;
font-size:22px;
}
.research-table .research-items img{
display:inline-block;
}
.research-table .research-items .label-item{
display:inline-block;
}
.research-table .research-items .child-item{
display:inline-block;
}
.research-table .research-items .child-item~.child-item{
margin-left:80px;
}
.research-table .research-items li:first-child .child-item~.child-item{
margin-left:47px;
}
.research-table .research-items li:not(:nth-child(1))>div{
padding-left:20px;
}
.research-table .research-items .item-wrapper{
position:relative;
width:435px;
height: 243px;
}
.research-table .research-items .mask-layer{
position:absolute;
left:0;
top:0;
z-index:2;
width:100%;
height:100%;
text-align:center;
background-color:rgba(1,1,1,0.4);
line-height:243px;
opacity:0;
transition:opacity .2s ease-in;
-webkit-transition:opacity .2s ease-in;
}
.research-table .research-items .mask-layer>i{
position:relative;
display:inline-block;
vertical-align:middle;
width:80px;
height:80px;
border-radius:50%;
border:5px solid #1BAD6C;
}
.research-table .research-items .mask-layer>i:before,
.research-table .research-items .mask-layer>i:after{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position:absolute;
content: ' ';
height:0;
width:8px;
background-color:#1BAD6C;
-webkit-transform-origin: left top;
transform-origin: left top;
border-radius: 5px;
}
.research-table .research-items .mask-layer>i:before{
top: 57px;
left: 32px;
background-color:#1BAD6C;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.research-table .research-items .mask-layer>i:after{
top: 37px;
left:10px;
background-color:#1BAD6C;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*点击添加active*/
.research-table .research-items .style-choose:checked + .label-item .item-wrapper .mask-layer{
opacity:1;
}
.research-table .research-items .style-choose:checked + .label-item .item-wrapper .mask-layer>i:before{
height: 40px;
-webkit-animation: dothatopcheck 0.4s ease 0s forwards;
animation: dothatopcheck 0.4s ease 0s forwards;
}
.research-table .research-items .style-choose:checked + .label-item .item-wrapper .mask-layer>i:after{
height: 30px;
-webkit-animation: dothabottomcheck 0.2s ease 0s forwards;
animation: dothabottomcheck 0.2s ease 0s forwards;
}
.research-table .research-items .btn-enlarge{
position:absolute;
right:0;
bottom:0;
z-index:10;
width:40px;
height:30px;
text-align:center;
background-color:rgba(1,1,1,0.7);
}
.research-table .research-items .btn-enlarge i{
display:inline-block;
width:30px;
height:30px;
background:url(../img/client-love/btn-bigger.png) no-repeat center center;
}
.research-table .research-items .is-nochecked{
display:inline-block;
width:30px;
height:30px;
border:1px solid #C0C0C0;
}
.research-table .research-items .item-name{
display: inline-block;
vertical-align: top;
margin:4px 10px;
color:#C0C0C0;
font-size:18px;
}
.research-table .research-items .check-box:checked + .label-item .is-nochecked{
background:url(../img/client-love/item-checked.jpg) no-repeat center center;
background-size:cover;
border:none;
}
.btn-submit{
position:fixed;
right:20px;
bottom:120px;
z-index:10;
width:100px;
height:100px;
border-radius:50%;
border:none;
background-color:#EF7800;
font-size:24px;
color:#fff;
}
/*处理一下横屏图片的宽度*/
@media all and (orientation : portrait) {
.research-table .research-items .item-wrapper{
width:307px;
height:172px;
}
.research-table .research-items .pic-style-choose img{
width:100%;
height:auto;
}
.research-table .research-items .mask-layer{
line-height:172px;
}
}
/*勾选的动画*/
/* Checkmark style starts */
@-webkit-keyframes dothabottomcheck {
0% {
height: 0;
}
100% {
height: 30px;
}
}
@keyframes dothabottomcheck {
0% {
height: 0;
}
100% {
height: 30px;
}
}
@keyframes dothatopcheck {
0% {
height: 0;
}
50% {
height: 0;
}
100% {
height: 40px;
}
}
@-webkit-keyframes dothatopcheck {
0% {
height: 0;
}
50% {
height: 0;
}
100% {
height: 40px;
}
}
具体实现效果:
参考:http://www.softwhy.com/mytest/code/1653/