当前位置：首页 > 下载站 > js特效 > CSS3特效 > CSS3选择滑块按钮代码

CSS3选择滑块按钮代码

分类: js特效 / CSS3特效	发布时间: 2017-12-22	访问量: 1144
下载量: 37

点击下载预览效果

更多>

24小时阅读排行榜

更多>

最新教程

python大神Mosh，零基础小白6小时完全入门

MySQL 初学入门（mosh老师）

244 2024-04-07
Mock.js | Axios.js | Json | Ajax--十天精品课堂

1338 2024-03-29
微信小程序开发之API篇

2869 2024-02-20
Webpack4.x---十天技能课堂

3329 2024-02-02
Bootstrap4.x---十天精品课堂

3508 2024-01-30
ECMAScript6 / ES6---十天技能课堂

3949 2024-01-26

CSS3选择滑块按钮代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery+CSS3选择滑块按钮代码 </title>

<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;
-webkit-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>

</head>
<body>
<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>
<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>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>