新增第148个小实例：简约的垂直选项卡
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
c2801c51b3
commit
0065741176
|
|
@ -154,4 +154,5 @@
|
|||
144. HTML5+CSS3小实例：图片悬停旋转堆叠特效
|
||||
145. HTML5+CSS3小实例：3D分割图片悬停拼接特效
|
||||
146. HTML5+CSS3+JS小实例：祝福版的3D标签云动画特效
|
||||
147. HTML5+CSS3小实例：关门式的图文组合悬停特效
|
||||
147. HTML5+CSS3小实例：关门式的图文组合悬停特效
|
||||
148. HTML5+CSS3+JS小实例：简约的垂直选项卡
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
*{
|
||||
/* 初始化 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
/* 100%窗口高度 */
|
||||
height: 100vh;
|
||||
/* 弹性布局 居中显示 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 渐变背景 */
|
||||
background: linear-gradient(to top,#e6e9f0,#eef1f5);
|
||||
}
|
||||
li{
|
||||
list-style: none;
|
||||
}
|
||||
.container{
|
||||
width: 900px;
|
||||
max-width: 100vw;
|
||||
height: 400px;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.1),
|
||||
0 1px 3px rgba(0,0,0,0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.left-box{
|
||||
width: 25%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.left-box li{
|
||||
padding: 10px 0;
|
||||
line-height: 34px;
|
||||
color: #aaa;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
/* 过渡效果 */
|
||||
transition: 0.2s ease-out;
|
||||
}
|
||||
.left-box .fa{
|
||||
font-size: 30px;
|
||||
margin-right: 15px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
}
|
||||
/* li选中态 */
|
||||
.left-box li.active{
|
||||
color: #333;
|
||||
}
|
||||
.left-box li.active .fa{
|
||||
color: #e74c3c;
|
||||
}
|
||||
.border{
|
||||
height: 288px;
|
||||
width: 1px;
|
||||
background-color: #ddd;
|
||||
}
|
||||
.border .line{
|
||||
width: 6px;
|
||||
height: 54px;
|
||||
background-color: #e74c3c;
|
||||
margin-left: -2px;
|
||||
margin-top: 35px;
|
||||
transition: 0.4s ease-in-out;
|
||||
}
|
||||
/* 分别设置各个红色小块的垂直位置 */
|
||||
.border .line1{
|
||||
margin-top: 35px;
|
||||
}
|
||||
.border .line2{
|
||||
margin-top: 89px;
|
||||
}
|
||||
.border .line3{
|
||||
margin-top: 143px;
|
||||
}
|
||||
.border .line4{
|
||||
margin-top: 197px;
|
||||
}
|
||||
.right-box{
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.right-box .rb{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
color: #333;
|
||||
position: absolute;
|
||||
/* 默认隐藏 */
|
||||
top: -350px;
|
||||
opacity: 0;
|
||||
transition: 0.4s ease-in-out;
|
||||
}
|
||||
.right-box .fa{
|
||||
font-size: 64px;
|
||||
}
|
||||
.right-box h1{
|
||||
margin: 30px 0 40px 0;
|
||||
}
|
||||
.right-box p{
|
||||
padding: 0 30px;
|
||||
}
|
||||
/* 右侧内容区选中态 */
|
||||
.right-box .rb.active{
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>简约的垂直选项卡</title>
|
||||
<!-- 引入字体图标 -->
|
||||
<link rel="stylesheet" href="/fonts/css/font-awesome.css">
|
||||
<link rel="stylesheet" href="148.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="left-box">
|
||||
<ul>
|
||||
<li class="active">
|
||||
<i class="fa fa-thumbs-o-up"></i>
|
||||
点赞
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-heart-o"></i>
|
||||
关注
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-star-o"></i>
|
||||
收藏
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-share-square-o"></i>
|
||||
转发
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="border">
|
||||
<div class="line line1"></div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="rb active">
|
||||
<i class="fa fa-thumbs-o-up"></i>
|
||||
<h1>我是标题</h1>
|
||||
<p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</p>
|
||||
</div>
|
||||
<div class="rb">
|
||||
<i class="fa fa-heart-o"></i>
|
||||
<h1>我是标题</h1>
|
||||
<p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</p>
|
||||
</div>
|
||||
<div class="rb">
|
||||
<i class="fa fa-star-o"></i>
|
||||
<h1>我是标题</h1>
|
||||
<p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</p>
|
||||
</div>
|
||||
<div class="rb">
|
||||
<i class="fa fa-share-square-o"></i>
|
||||
<h1>我是标题</h1>
|
||||
<p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="148.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
// 获取要操作的元素
|
||||
let lis=document.querySelectorAll('li'),
|
||||
rbs=document.querySelectorAll('.rb'),
|
||||
line=document.querySelector('.line');
|
||||
|
||||
// 循环绑定li的点击事件，并设置选中态样式
|
||||
lis.forEach((item,index)=>{
|
||||
item.addEventListener('click',function(){
|
||||
lis.forEach((item1)=>{
|
||||
item1.classList.remove('active');
|
||||
})
|
||||
rbs.forEach((item2)=>{
|
||||
item2.classList.remove('active');
|
||||
})
|
||||
lis[index].classList.add('active');
|
||||
rbs[index].classList.add('active');
|
||||
line.className='line line'+(index+1); //index是从0开始，所以这里要+1
|
||||
})
|
||||
})
|
||||
Loading…
Reference in New Issue