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

CSS3选择滑块按钮代码

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

点击下载预览效果

更多>

最新下载

代码量少的jQuery图片幻灯片

代码量少的jQuery图片幻灯片是一款调用简单的jQuery jcSlider插件，只需修改插件参数及CSS便能实现想要的效果。

0 2026-01-29

jQuery超酷动态弹出表单 jQuery超酷动态弹出表单网页特效

jQuery超酷动态弹出表单是一款基于jQuery实现的超酷动态弹出登录和注册表单效果，默认情况下表单处于掩藏状态，点击登录和注册按钮表单动态显示。

0 2026-01-29

css3实现3d搜索框

css3实现3d搜索框是一款基于css3制作的3D搜索表单效果。本作品由【站长素材】收集整理，转载请注明出处！

0 2026-01-29

CSS3用户登录框样式代码

CSS3用户登录框样式代码是一款扁平修边样式的登录表单特效。

0 2026-01-29

jQuery鼠标点击切换背景图片代码

jQuery鼠标点击切换背景图片代码是一款简单实用的鼠标点击按钮切换图片背景特效。

0 2026-01-29

jQuery投资网站弹出框确认表单代码

jQuery投资网站弹出框确认表单代码是一款jQuery layer弹框插件，来自投资网站的确认投资表单代码。

0 2026-01-29

24小时阅读排行榜

更多>

最新教程

最新Python教程从入门到精通

Node.js 教程

16378 2025-08-28
CSS3 教程

1547135 2025-08-27
Rust 教程

23485 2025-08-27
Vue 教程

25908 2025-08-22
PostgreSQL 教程

22410 2025-08-21
Git 教程

9346 2025-08-21

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>