jquery拖动滑动切换页面选项卡效果代码
代码语言：html
所属分类：选项卡
代码描述：jquery拖动滑动切换页面选项卡效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>
<meta charset="UTF-8"><style>
* {
margin: 0;
padding: 0;
-moz-user-select: none;
/*火狐*/
-webkit-user-select: none;
/*webkit浏览器*/
-ms-user-select: none;
/*IE10*/
-khtml-user-select: none;
/*早期浏览器*/
user-select: none;
}
#box {
width: 350px;
height: 500px;
margin: 30px auto;
border-radius: 5px;
box-shadow: 0px 0px 27px -3px red;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
overflow: hidden;
position: relative;
background-color: #ccc;
}
.childbox {
width: 300%;
height: 100%;
display: flex;
position: absolute;
top: 0;
left: 0;
}
.childbox>div {
flex: 1;
height: 100%;
}
.child1 {
background-color: salmon;
}
.child2 {
background-color: greenyellow;
}
.child3 {
background-color: blueviolet;
}
.nav_box {
position: absolute;
width: 100%;
text-align: center;
line-height: 50px;
}
.nav_box div {
display: inline-block;
color: #fff;
margin: 0 5px;
position: relative;
}
.active_nav::before {
content: '';
position: absolute;
background-color: #fff;
left: 2px;
bottom: 7px;
width: 27px;
height: 2px;
}
.childbox>div {
position: relative;
}
.childbox>div .listview {
width: 100%;
position: absolute;
}
.view_child {
text-align: center;
line-height: 200px;
color: #fff;
font-size: 25px;
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
</head>
<body>
<div id="box">
<div class="childbox" style="left: -200%; transition: all 0.5s ease 0s;">
<div class="child1">
<div class="listview" type="附近">
<div class="view_child" style="background-color: rgb(38, 232, 246); height: 500px;">
<div>
附近:1
</div>
<hr>
<div>
页码：1
</div>
</div>
<div class="view_child" style="background-color: rgb(54, 89, 177); height: 500px;">
<div>
附近:2
</div>
<hr>
<div>
页码：1
</div>
</div>
<div class="view_child" style="background-color: rgb(39, 24, 52); height: 500px;">
<div>
附近:3
</div>
<hr>
<div>
页码：1
</div>
</div>
<div class="view_child" style="background-color: rgb(156, 123, 209); height: 500px;">
<div>
附近:4
</div>
<hr>
<div>
页码：1
</div>
</div>
<div class="view_child" style="background-color: rgb(146, 249, 134); height: 500px;">
<div>
附近:5
</div>
<hr>
<div>
页码：1
</div>
</div>
<div class="view_child" style="background-color: rgb(10, 203, 13); height: 500px;">
<div>
附近:6
</div>
<hr>
<div>
页码：1
</div>
</div>
<div class="view_child" style="background-color: rgb(25, 193, 13); height: 500px;">
<div>
附近:7
</div>
<hr>
<div>
页码：1
</div>
</div>
<div class="view_child" style="background-color: rgb(21, 122, 243); height: 500px;">
<div>
附近:8
</div>
<hr>
<div>
页码：1
</div>
</div>
<div class="view_child" style="background-color: rgb(66, 127, 213); height: 500px;">
<div>
附近:9
</div>
<hr>
<div>
页码：1
</div>
</div>
<div class="view_child" style="background-color: rgb(85, 0, 147); height: 500px;">
<div>
附近:10
</div>
<hr>
<div>
页码：1
</div>
</div>
</div>
</div>
<div class="child2">
<div class="listview" type="关注">
<div class="view_child" style="background-color: rgb(254, 243, 77); height: 500px;">
<div>
关注:1
</div>
<hr>
<div>
页码：1
</div>
</div>
<div class="view_child" style="background-color: rgb(223, 46, 61); height: 500px;">
<div>
关注:2
</div>
<hr>
<div>
页码：1
</div>
</div>
<div class="view_child" style="background-color: rgb(102, 51, 117); height: 500px;">
<div>
关注:3
</div>
<hr>
<div>
页码：1
</div>
</div>
<div class="view_child" style="background-color: rgb(183, 92, 112); height: 500px;">
<div>
关注:4
</div>
<hr>
<div>
页码：1
</div>
</div>
<div class="view_child" style="background-color: rgb(80, 59, 117); height: 500px;">
<div>
关注:5
</div>
<hr>
<div>
页码：1
</div>
</div>
<div class="view_child" style="background-color: rgb(112, 2, 33); height: 500px;">
<div>
关注:6
</div>
<hr>
<div>
页码：1
</div>
</div>
<div class="view_child" style="background-color: rgb(235, 135, 220); height: 500px;">
<div>
关注:7
</div>
<hr>
<div>
页码：1
</div>
</div>
<div class="view_child" style="background-color: rgb(225, 85, 227); height: 500px;">
<div>
关注:8
</div>
<hr>
<div>
页码：1
</div>
</div>
<div class="view_child" style="background-color: rgb(130, 71, 63); height: 500px;">
<div>
关注:9
</div>
<hr>
<div>
页码：1
</div>
</div>
<div class="view_child" style="background-color: rgb(130, 71, 233); height: 500px;">
<div>
关注:10
</div>
<hr>
<div>
页码：1
</div>
</div>
</div>
</div>
<div class="child3">
<div class="listview" type="推荐">
<div class="view_child" style="background-color: rgb(213, 107, 222); height: 500px;">
<div>
推荐:1
</div>
<hr>
<div>
页码：1
</div>
</div>
<div class="view_child" style="background-color: rgb(87, 45, 6); height: 500px;">
<div>
推荐:2
</div>
<hr>
<div>
页码：1
</div>
</div>
<div class="view_child" style="background-color: rgb(194, 114, 170); height: 500px;">
<div>
推荐:3
</div>
<hr>
<div>
页码：1
</div>
</div>
<div class="view_child" style="background-color: rgb(193, 226, 144); height: 500px;">
<div>
推荐:4
</div>
<hr>
<div>
页码：1
</div>
</div>
<div class="view_child" style="background-color: rgb(108, 197, 138); height: 500px;">
<div>
推荐:5
</div>
<hr>
<div>
页码：1
</div>
</div>
<div class="view_child" style="background-color: rgb(158, 239, 13); height: 500px;">
<div>
推荐:6
</div>
<hr>
<div>
页码：1
</div>
</div>
<div class="view_child" style="background-color: rgb(150, 91, 247); height: 500px;">
<div>
推荐:7
</div>
<hr>
<div>
页码：1
</div>
</div>
<div class="view_child" style="background-color: rgb(17, 114, 240); height: 500px;">
<div>
推荐:8
</div>
<hr>
<div>
页码：1
</div>
</div>
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0