一个html+css+js实现的导航栏电梯效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.item-text {
position: relative;
padding-left: 40px;
font-size: 20px;
color: #999;
line-height: 30px;
cursor: pointer;
}
.item-text:before {
content: "";
position: absolute;
left: 16px;
top: 50%;
width: 2px;
height: 2px;
border-radius: 5px;
background-color: #999;
transition: all .4s ease;
}
.active {
color: #000;
position: relative;
padding-left: 40px;
font-size: 22px;
cursor: pointer;
}
.active:before {
top: 5px;
height: 25px;
background-color: #ff6a00;
}
</style>
<script>
windowAddMouseWheel();
var item = 1;
var num = 0; // 统计滑轮滑动了几次，以为滑动速度过快，直接就到底了，这样中间的就不会显示了，当滑动了10次
// var obj = document.getElementById("item"+item);
// obj.setAttribute("class", "style2");
function windowAddMouseWheel() {
var scrollFunc = function (e) {
e = e || window.event;
if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
if (e.wheelDelta > 0) { //当滑轮向上滚动时
num ++;
if (item > 1 && num == 10) {
var obj = document.getElementById("item"+item);
obj.setAttribute('class', 'item-text');
item --;
obj = document.getElementById("item"+item);
obj.setAttribute('class', 'item-text active');
if (num >= 10 || num <= -10) {
num = 0;
}
}
}
if (e.wheelDelta < 0) { //当滑轮向下滚动时
num --;
if (item < 3 && num == -10) {
var obj = document.getElementById("item"+item);
obj.setAttribute('class', 'item-text');
item ++;
console.log("item"+item);
obj = document.getElementById("item"+item);
obj.setAttribute('class', 'item-text active');
if (num >= 10 || num <= -10) {
num = 0;
}
}
}
} else if (e.detail) { //Firefox滑轮事件
if (e.detail> 0) { //当滑轮向上滚动时
alert("滑轮向上滚动");
}
if (e.detail< 0) { //当滑轮向下滚动时
alert("滑轮向下滚动");
}
}
};
//给页面绑定滑轮滚动事件
if (document.addEventListener) {
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
//滚动滑轮触发scrollFunc方法
window.onmousewheel = document.onmousewheel = scrollFunc;
}
// 通过点击更改样式
function dbclick(value) {
num = 0;
for (var i = 1; i <= 3; i++) {
if (value == i) {
obj = document.getElementById("item"+i);
obj.setAttribute('class', 'item-text active');
} else {
obj = document.getElementById("item"+i);
obj.setAttribute('class', 'item-text');
}
}
}
</script>
<title>电梯导航</title>
</head>
<body>
<div class="section-item">
<div class="item-text active" id="item1" onclick="dbclick(1)">
专用网络
</div>
<div class="item-text" id="item2" onclick="dbclick(2)">
弹性公网IP
</div>
<div class="item-text" id="item3" onclick="dbclick(3)">
NAT网关
</div>
</div>
</body>
</html>
实现的是阿里云的轮滑电梯
版权声明：本文为qq_42795281原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。