最新下载
24小时阅读排行榜
- 1 微博的浏览记录会同步吗_微博浏览记录同步规则说明
- 2 如何在Windows中配置JavaFX开发环境
- 3 如何通过css工具Sass实现循环生成类
- 4 python错误类型捕获的方法
- 5 PHP一键环境为什么不能发送邮件_邮件发送功能配置
- 6 彻底格式化硬盘并进行纯净Windows安装
- 7 Linux用户权限怎么管理_Linux用户权限管理的详细操作教程
- 8 PHPWebSocket怎么通信_PHP结合GatewayWorker实现WebSocket实时通信
- 9 抖音tiktok官方网址入口官方版 抖音tiktok官网首页快速直达
- 10 小强阅读app怎么删除书架上的书_小强阅读app已存书籍如何从书架删除详细方法
- 11 Linux SSH授权密钥与权限设置
- 12 阴阳师一起捉咪藏第三天攻略-阴阳师一起捉咪藏第三天在哪找
- 13 PHP代码怎么实现验证码生成_PHP验证码图片生成与验证步骤
- 14 css初级项目导航栏下拉效果优化
- 15 OFX代购大额汇款优势在哪里_OFX代购大额汇款优势解读
最新教程
-
- Node.js 教程
- 5824 2025-08-28
-
- CSS3 教程
- 851762 2025-08-27
-
- Rust 教程
- 9258 2025-08-27
-
- Vue 教程
- 11352 2025-08-22
-
- PostgreSQL 教程
- 8869 2025-08-21
-
- Git 教程
- 4700 2025-08-21
<!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>
这是一个CSS3选择滑块按钮代码,需要的朋友可以直接下载使用,更多特效代码尽在PHP中文网。

