直接看效果点这里
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; }); }); }