js横向滑动折叠导航菜单代码实例

快乐打工仔 分类:实例代码

分享一段代码实例,它实现了导航菜单横向折叠滑动效果。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
#main {
width: 580px;
height: 403px;
margin: 200px auto;
position: relative;
background-color: #22FCDF;
overflow: hidden;
}
#menu {
width: 500px;
height: 403px;
}
#menu1 {
position: absolute;
left: 0;
}
#menu2 {
position: absolute;
left: 20px;
}
#menu3 {
position: absolute;
left: 40px;
}
#menu4 {
position: absolute;
left: 60px;
}
#menu5 {
position: absolute;
left: 80px;
}
.menu .menu-title {
width: 20px;
height: 403px;
float: left;
cursor: pointer;
}
#menu1 .menu-title {
background-color: #45A78E;
}
#menu2 .menu-title {
background-color: #90CC2C;
}
#menu3 .menu-title {
background-color: #F0AC24;
}
#menu4 .menu-title {
background-color: #F10808;
}
#menu5 .menu-title {
background-color: #756E6B;
}
.menu .menu-content {
position: absolute;
background-color: #A39B9B;
width: 480px;
height: 403px;
left: 20px;
}
</style>
<script type="text/javascript">
var timer = null;
function move(obj, iTrget) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var speed = (iTrget - obj.offsetLeft) / 10;
speed = Math.ceil(speed);
if (Math.abs(iTrget - obj.offsetLeft) <= 10) {
clearInterval(timer);
obj.style.left = iTrget + 'px';
} else {
obj.style.left = obj.offsetLeft + speed + 'px';
}
}, 30);
}
window.onload = function() {
var omenu1 = document.getElementById('menu1');
var omenu2 = document.getElementById('menu2');
var omenu3 = document.getElementById('menu3');
var omenu4 = document.getElementById('menu4');
var omenu5 = document.getElementById('menu5');
omenu5.onclick = function() {
if (omenu5.offsetLeft == 80) {
move(this, 560);
}
if (omenu5.offsetLeft == 560) {
move(this, 80)
move(omenu1, 0);
move(omenu2, 20);
move(omenu3, 40);
move(omenu4, 60);
}
}
omenu4.onclick = function() {
if (omenu4.offsetLeft == 60) {
move(this, 540);
move(omenu5, 560);
}
if (omenu4.offsetLeft == 540) {
move(this, 60)
move(omenu1, 0);
move(omenu2, 20);
move(omenu3, 40);
}
}
omenu3.onclick = function() {
if (omenu3.offsetLeft == 40) {
move(this, 520);
move(omenu4, 540);
move(omenu5, 560);
}
if (omenu3.offsetLeft == 520) {
move(this, 40)
move(omenu1, 0);
move(omenu2, 20);
}
}
omenu2.onclick = function() {
if (omenu2.offsetLeft == 20) {
move(this, 500);
move(omenu3, 520);
move(omenu4, 540);
move(omenu5, 560);
}
if (omenu2.offsetLeft == 500) {
move(this, 20)
move(omenu1, 0);
}
}
omenu1.onclick = function() {
if (omenu1.offsetLeft == 0) {
move(this, 480);
move(omenu2, 500);
move(omenu3, 520);
move(omenu4, 540);
move(omenu5, 560);
}
if (omenu1.offsetLeft == 480) {
move(this, 0)
}
}
}
</script>
</head>
<body>
<div id="main">
<div class="menu">
<div id="menu1" style="left:480px">
<div class="menu-title">犀牛前端部落一</div><div class="menu-content"></div>
</div>
<div id="menu2" style="left:500px">
<div class="menu-title">犀牛前端部落二</div><div class="menu-content"></div>
</div>
<div id="menu3" style="left:520px">
<div class="menu-title">犀牛前端部落三</div><div class="menu-content"></div>
</div>
<div id="menu4" style="left:540px">
<div class="menu-title">犀牛前端部落四</div><div class="menu-content"></div>
</div>
<div id="menu5" style="left:560px">
<div class="menu-title">犀牛前端部落五</div><div class="menu-content"></div>
</div>
</div>
</div>
</body>
</html>

js横向滑动折叠导航菜单代码实例,这样的场景在实际项目中还是用的比较多的,关于js横向滑动折叠导航菜单代码实例就介绍到这了。

js横向滑动折叠导航菜单代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容