jQuery+CSS3滑块开关按钮
1、新建html文档。
2、书写hmtl代码。
<center>
<div class="tab-menu eightrow"> <span id="bg"></span>
<ul id="list">
<li class="active" type="1">24h</li>
<li type="2">48h</li>
<li type="3">72h</li>
<li type="4">96h</li>
<li type="5">120h</li>
<li type="6">144h</li>
<li type="7">168h</li>
<li type="8">192h</li>
<li type="9">216h</li>
<li type="10">240h</li>
<li type="11">264h</li>
<li type="12">288h</li>
<li type="13">312h</li>
<li type="14">336h</li>
</ul>
</div>
<div class="tab-menu tworow"> <span id="thirdbg"></span>
<ul id="hourlist">
<li class="active" type="1">24h</li>
<li type="2">48h</li>
</ul>
</div>
</center>
3、书写css代码。
<style>
.tab-menu { margin-top: 20px; height: 26px; overflow: hidden; position: relative; border-radius: 20px; }
ul { padding: 0; margin: 0; list-style: none; }
li { height: 24px; line-height: 24px; float: left; text-align: center; position: relative; font-size: 12px; }
.tab-menu span { margin: 4px; display: inline-block; height: 18px; position: absolute; left: 0; top: 0; border-radius: 20px; transition: left .4s; -we bkit-transition: left .4s; -moz-transition: left .4s; }
li:hover { cursor: pointer; }
.tworow { width: 160px; background-color: rgba(224, 229, 232, 1); }
.tworow span { width: 72px; background-color: rgba(0, 54, 80, 1); }
.tworow .active { color: white; }
.tworow li { width: 80px; color: rgba(0, 54, 80, 1); }
.eightrow li { width: 50px; color: white; }
.eightrow .active { color: #10aefc; }
.eightrow { width: 700px; background: #10aefc; }
.eightrow span { width: 42px; background: white; }
</style>
4、书写并添加js代码。
<script src="script/jquery.min.js"></script>
<script src="script/slide.js"></script>
<script>
new Slideicon($("#list"),{
index:0,
cover:$("#bg"),
callback:function (data) {
console.log(data)
}
});
new Slideicon($("#hourlist"),{
index:0,
cover:$("#thirdbg"),
callback:function (data) {
console.log(data)
}
});
</script>
5、代码整体结构。
6、查看效果。
