手风琴相册
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手风琴式相册-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
margin:0;
padding:0;
}
#wrap {
width:800px;
height:400px;
margin:0 auto;
border:5px solid #009999;
border-radius:10px;
margin-top:10px;
position:relative;
overflow:hidden;
}
input {
display:none;
}
label {
width:300px;
height:400px;
position:absolute;
top:0;
transition:0.5s;
}
label:nth-of-type(1) {
background:url(http://www.jq22.com/img/cs/300x500-1.png) no-repeat;
left:0;
}
label:nth-of-type(2) {
background:url(http://www.jq22.com/img/cs/300x500-2.png) no-repeat;
left:100px;
}
label:nth-of-type(3) {
background:url(http://www.jq22.com/img/cs/300x500-3.png) no-repeat;
left:200px;
}
label:nth-of-type(4) {
background:url(http://www.jq22.com/img/cs/300x500-4.png) no-repeat;
left:300px;
}
label:nth-of-type(5) {
background:url(http://www.jq22.com/img/cs/300x500-5.png) no-repeat;
left:400px;
}
label:nth-of-type(6) {
background:url(http://www.jq22.com/img/cs/300x500-6.png) no-repeat;
left:500px;
}
input:checked~label {
transform:translateX(200px);
-webkit-transform:translateX(200px);
}
</style>
</head>
<body>
<div id="wrap">
<form action="">
<label for="input1"></label>
<input type="radio" id="input1" name="img">
<label for="input2"></label>
<input type="radio" id="input2" name="img">
<label for="input3"></label>
<input type="radio" id="input3" name="img">
<label for="input4"></label>
<input type="radio" id="input4" name="img">
<label for="input5"></label>
<input type="radio" id="input5" name="img">
<label for="input6"></label>
<input type="radio" id="input6" name="img">
</form>
</div><script>
</script>
</body>
</html>
