直接看效果点这里
HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> 横竖滑动门 </title>
<link rel="stylesheet" href="sliding-door.css"/>
</head>
<body>
<div class="m-sliding-x" id="J_SlidingX">
<div class="list list-1">
<a href="javascript:;" class="hd">1</a>
<div class="bd">内容1</div>
</div>
<div class="list list-2">
<a href="javascript:;" class="hd">2</a>
<div class="bd">内容2</div>
</div>
<div class="list list-3">
<a href="javascript:;" class="hd">3</a>
<div class="bd">内容3</div>
</div>
<div class="list list-4">
<a href="javascript:;" class="hd">4</a>
<div class="bd">内容4</div>
</div>
</div>
<div class="m-sliding-y" id="J_SlidingY">
<div class="list list-1">
<a href="javascript:;" class="hd">1</a>
<div class="bd">内容1</div>
</div>
<div class="list list-2">
<a href="javascript:;" class="hd">2</a>
<div class="bd">内容2</div>
</div>
<div class="list list-3">
<a href="javascript:;" class="hd">3</a>
<div class="bd">内容3</div>
</div>
<div class="list list-4">
<a href="javascript:;" class="hd">4</a>
<div class="bd">内容4</div>
</div>
</div>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="sliding-door.js"></script>
<script>
// 横向滑动门
slidingDoor({
btnList : $(‘#J_SlidingX .list .hd‘),
mainList : $(‘#J_SlidingX .list‘),
btnOffset : 40,
mainOffset : 160,
event : ‘click‘,
direction : ‘x‘
});
// 竖向滑动门
slidingDoor({
btnList : $(‘#J_SlidingY .list .hd‘),
mainList : $(‘#J_SlidingY .list‘),
btnOffset : 40,
mainOffset : 160,
event : ‘click‘,
direction : ‘y‘
});
</script>
</body>
</html>
CSS
/*m-sliding-x*/
.m-sliding-x{ width: 320px; height:100px; overflow:hidden; position:relative; margin: 10px auto; }
.m-sliding-x .list {position:absolute;top:0;width:200px;height:100%; text-align: center; line-height: 100px; background-color: #999;}
.m-sliding-x .list .hd{position:relative;float:left; height:100%; width:40px; text-align: center; line-height: 100px; color: #fff; text-decoration: none; background-color: #141414; }
.m-sliding-x .list .hd:hover{ background-color:#2A2829;}
.m-sliding-x .list-1{left:0;}
.m-sliding-x .list-2{left:200px;}
.m-sliding-x .list-3 {left:240px;}
.m-sliding-x .list-4{left:280px;}
.m-sliding-x .list .bd{ position:absolute; left:40px; top:0; width: 160px; height:100%; }
/*m-sliding-y*/
.m-sliding-y{ width: 100px; height:320px; overflow:hidden; position:relative; margin: 10px auto; }
.m-sliding-y .list {position:absolute;left:0;width:100%;height:200px; text-align: center; line-height: 200px; background-color: #999;}
.m-sliding-y .list .hd{position:relative;float:left; height:40px; width:100%; text-align: center; line-height: 40px; color: #fff; text-decoration: none; background-color: #141414; }
.m-sliding-y .list .hd:hover{ background-color:#2A2829;}
.m-sliding-y .list-1{top:0;}
.m-sliding-y .list-2{top:200px;}
.m-sliding-y .list-3 {top:240px;}
.m-sliding-y .list-4{top:280px;}
.m-sliding-y .list .bd{ position:absolute; top:40px; left:0; width: 100%; height:160px; }
JS
//横竖滑动门
function slidingDoor(opt){
var oBtnList = opt.btnList,
oBtn = opt.btnOffset,
oMainList = opt.mainList,
oMain = opt.mainOffset,
ev = opt.event || ‘click‘,
oDirection = opt.direction || ‘x‘,
len = oBtnList.length;
oBtnList.each(function(i, v){
$(this).on(ev, function(){
for(var n = 1; n <= i; n++){//第一个不需要动
if(oDirection === ‘x‘){
oMainList.eq(n).animate({
left:oBtn*n+‘px‘
});
}else{
oMainList.eq(n).animate({
top:oBtn*n+‘px‘
});
}
}
for(var j = n; j < len; j++){
if(oDirection === ‘x‘){
oMainList.eq(j).animate({
left:oBtn*j+oMain+‘px‘
});
}else{
oMainList.eq(j).animate({
top:oBtn*j+oMain+‘px‘
});
}
}
return false;
});
});
}
时间： 2024-08-12 03:34:44