一、先看一下不同的窗口下的样子![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/00740c9bf1930983323ddb7efe33e1ab.png#pic_center)
这里拖动窗口都是响应的
二、HTML源码
代码如下(示例):
<ul class="align-nav">
<li class="active btn btn-outline-secondary btn-self-atcive"><a>Home</a></li>
<li class="active btn btn-outline-secondary"><a>About As</a></li>
<li class="active btn btn-outline-secondary"><a>My Poj</a></li>
<li class="active btn btn-outline-secondary"><a>Study Notes</a></li>
</ul>
<div class="content">
<ul class="content-box list-unstyled">
<li style="background: url('images/home.jpg') no-repeat center; background-size: cover;" >
</li>
<li class="bg-success">
2
</li>
<li class="bg-danger">
3
</li>
<li class="bg-primary">
4
</li>
</ul>
</div>
三、CSS源码
代码如下(示例):这里使用的是Scss的格式
#body{
font-size: 16px;
}
.align-nav{
position: fixed;
top: 0;
left: 0;
z-index: 1000;
list-style: none;
width: 6rem;
text-align: center;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-content: center; /* 水平平均分布 //设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。 */
align-items: center; /* 垂直居中 //定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。 */
li{
margin: 2rem 0 0;
width: 100%;
cursor: pointer;
a{
flex:0.5;
margin: auto;
display: block;
}
}
}
.content{
overflow: hidden;
.content-box{height: 99999px;list-style: none;padding: 0;margin: 0; animation: picAni 1s both}
li{
}
@keyframes picAni {
0%{height: 100%}
100%{height: 0}
}
}
.btn-self-atcive{
background: red !important;
}
四、jQuery源码
代码如下(示例):
$(document).ready(function (){
init();
nav_li_chick();
//窗口监测 注拖动浏览器改变窗口是默认执行
$(window).resize(function(event) {
let windHeight =$(window).height();
$(".content").css("height",windHeight);
$(".content-box li").eq(NowIndex).css("height",windHeight)
});
});
{
//初始化函数
function init(event) {
NowIndex = 0;//设置一个全局变量,点击按钮时记录对于显示的板块的下标,默认设置为0
$(".align-nav li").eq(0).addClass("btn-self-atcive");//页面加载默认home....加一个背景颜色,自己写的css样式
let windHeight =$(window).height();
$(".content").css("height",windHeight);
$(".content li").css("height",windHeight);
}
}
{
//按钮点击函数
function nav_li_chick(event) {
$(".align-nav li").click(function (event) {
let windHeight =$(window).height();
var index = $(".align-nav li").index((this));
NowIndex = index;
console.log(index);
// resizeH(index);
//按钮点击变背景并把其他按钮恢复
$(".align-nav li").eq(index).addClass("btn-self-atcive");
$(".align-nav li").eq(index).siblings().removeClass("btn-self-atcive");
$(".content li").eq(index).css("display","block");
$(".content li").css("height",windHeight);
$(".content-box").css("margin-top",-windHeight*index)
});
}
}