码迷,mamicode.com
首页 > Web开发 > 详细

jQuery实现动画滑动二级菜单

时间:2017-08-16 13:19:34      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:jquer   javascrip   round   char   hidden   black   back   sheet   lock   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js" type="text/javascript"></script>
    <script src="滑动动画.js" type="text/javascript"></script>
    <link rel="stylesheet" href="滑动动画.css" type="text/css"/>
</head>
<body>
<div class="header">
    <ul>
        <li class="nav"><a href="#">one</a></li>
        <li class="nav"><a href="#">two</a></li>
        <li class="nav"><a href="#">three</a></li>
        <li class="nav"><a href="#">four</a></li>
    </ul>
</div>
<div class="big">
    <div class="main">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
        <div class="d"></div>
    </div>
</div>
</body>
</html>
*{
    margin:0;
    padding:0;
}
.header{
    background-color:aqua;
    height: 40px;

}
ul{
    list-style: none;
}
ul li{
    float: left;
    text-align: center;
    line-height: 40px;
    border-right: 1px solid white;
}
a{
    text-decoration:none;
    color: white;
    display: block;
    padding: 0 20px;
}
ul li a:hover {
    background-color: white;
    color: aqua;
}
.big{
    width:100%;
    overflow: hidden;
    height:0;
    top:40px;
}
.main{
    width: 400%;
    height:500px;
}
.a{
    width:25%;
    height: 500px;
    background-color: yellow;
    float:left;
}
.b{
    width:25%;
    height: 500px;
    background-color: red ;
    float:left;
}
.c{
    width:25%;
    height: 500px;
    background-color: black ;
    float:left;
}
.d{
    width:25%;
    height: 500px;
    background-color: blue;
    float:left;
}

 

$(function () {
    $(".header").on("click","li",function () {
        var curIndex = $(this).index(), mlValue = "-" + curIndex * 100 + "%";
        /*index()获取header里的li,并确定为第几个然后返回数字*/
        if ($(".big").hasClass("active")) {
            $(".main").animate({marginLeft: mlValue});
        }
        else{
            $(".main").css({marginLeft:mlValue});
            $(".big").animate({height:"500px"}).addClass("active");
        }
    });
});

 

jQuery实现动画滑动二级菜单

标签:jquer   javascrip   round   char   hidden   black   back   sheet   lock   

原文地址:http://www.cnblogs.com/yzhweb/p/7368029.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!