说明书
楼层跳跃插件使用说明:
*第一步:复制html结构,有多少层楼就保留多少个结构。
*第二步,复制样式,注意类名和样式的优先级问题。f1~f5 类名是为了好看加的,实际使用删除
*第三步:引入js(插件)
*第四步:调用即可,无需传参,FloorJump();
html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>楼层跳跃</title>
<style>
* {
margin: 0;
padding: 0;
}
#slide {
position: fixed;
width: 50px;
left: 20px;
top: 100px;
}
#slide span {
float: left;
display: block;
text-align: center;
line-height: 50px;
width: 50px;
height: 50px;
margin-top: 10px;
background: #eee;
cursor: pointer;
}
#slide>span:hover {
background: pink;
}
.floors {
font-size: 100px;
text-align: center;
}
/* 此类名只是为了给个背景色,实际使用的时候应该删除 */
.f1 {
background: #58bc58;
}
.f2 {
background: #448575;
}
.f3 {
background: #365475;
}
.f4 {
background: #99bfce;
}
.f5 {
background: #c5ca96;
}
</style>
</head>
<body>
<div id="ul1">
<div class="floors f1">手机</div>
<div class="floors f2">电脑</div>
<div class="floors f3">手表</div>
<div class="floors f4">相机</div>
<div class="floors f5">电视</div>
</div>
<div id="slide">
<span>01F</span>
<span>02F</span>
<span>03F</span>
<span>04F</span>
<span>05F</span>
</div>
</body>
<script src="FloorJump.js"></script>
<script>
/*
楼层跳跃插件使用说明:
*第一步:复制html结构,有多少层楼就保留多少个结构。
*第二步,复制样式,注意类名和样式的优先级问题。f1~f5 类名是为了好看加的,实际使用删除
*第三步:引入js(插件)
*第四步:调用即可,无需传参,FloorJump();
*/
FloorJump();
</script>
</html>
FloorJump.js
function FloorJump() {
let ul1 = document.getElementById('ul1');
let slide = document.getElementById('slide');
let fList = ul1.getElementsByClassName('floors');
let spanList = slide.getElementsByTagName('span');
let h = window.innerHeight; //获取当前窗口高度
// 1 .让楼层的高度和可视区的高度保持一致
for (let i = 0; i < fList.length; i++) {
fList[i].style.height = h + 'px'; //height = 可视化窗口
fList[i].style.lineHeight = h + 'px'; //居中
}
//2.点击按钮可以跳转到对应的楼层
for (let i = 0; i < spanList.length; i++) {
spanList[i].index = i;
// console.log(i)
spanList[i].onclick = function () { //点击高亮
// 排他
for (let j = 0; j < spanList.length; j++) {
spanList[j].style.background = '#eee';
}
this.style.background = 'orangered'; //点击选定
let y = this.index;
window.scrollTo(0, y * window.innerHeight)
}
}
//页面滚动,楼层跟着高亮
window.onscroll = () => {
let scrollTop = window.scrollY;//动态获取到滚动距离
let x = parseInt((scrollTop + h / 2) / h); //控制一=下一楼层出现一半就高亮
// 排他
for (let j = 0; j < spanList.length; j++) {
spanList[j].style.background = '#eee';
}
spanList[x].style.background = 'orangered';
}
}