手风琴图片和钢琴导航栏JQ滑动特效-CSDN博客

手风琴JQ滑动特效

1.效果预览:

556.gif

2.相关代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .out {
            width: 1700px;
            height: 240px;
            overflow: hidden;
            margin: 0 auto;
        }

        .clear {
            clear: both;
        }

        img {
            width: 600px;
            height: 240px;
        }

        .first {
            margin-left: 0px;
        }

        .out2 {
            width: 1200px;
            height: 240px;
            margin: 0 auto;
            overflow: hidden;
            border: 1px solid red;
        }
        ul li{
            width: 240px;
            height: 240px;
            list-style: none;
            float: left;
        }

    </style>

</head>
<body>
<div class="out2">
    
    <div class="out">

        <ul>
            <li>  <img class="first" src="xiaomi/1.jpg"/></li>
            <li><img src="image/2.jpg"></li>
            <li><img src="image/3.jpg"></li>
            <li> <img src="image/4.jpg"></li>
            <li> <img src="image/5.jpg"></li>
        </ul>

    </div>
</div>

<script>
    var $lis = $("ul li");
    $lis.mouseenter(function () {
        $(this).stop().animate({width: 600},200).siblings().stop().animate({width:150},200);
    })

    $("div.out2").mouseleave(function () {
        $lis.stop().animate({width: 240},200);
    })

</script>


</body>
</html>

钢琴导航栏

1.演示效果

dianbsh.gif

2.相关代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script>
    <style>
        ul {
            height: 80px;
            overflow: hidden;
        }

        ul > li {
            width: 200px;
            height: 160px;
            /*background-color: black;*/
            color: white;
            float: left;
            list-style: none;
            text-align: center;
            line-height: 80px;
            border: 0.5px solid red;
        }

        ul > li .inner {
            width: 200px;
            height: 80px;
            background-color: black;
        }

        span.huang {

            width: 200px;
            height: 80px;
            display: block;
            background-color: orange;
            float: left;
            position: relative;

        }

        .out {

            margin-top: -80px;
            background-color: black;
            z-index: -2;
        }

        .wenzi {
            display: block;
            position: relative;
            color: white;
            z-index: 999;
            cursor: pointer;
        }


    </style>
</head>
<body>

<ul>
    <li><span class="wenzi">所有手机</span><div class="out"><div class="inner"></div><span class="huang"></span></div></li>
    <li><span class="wenzi">所有配件</span><div class="out"><div class="inner"></div><span class="huang"></span></div></li>
    <li><span class="wenzi">电视机</span><div class="out"><div class="inner"></div><span class="huang"></span></div></li>
    <li><span class="wenzi">笔记本</span><div class="out"><div class="inner"></div><span class="huang"></span></div></li>
    <li><span class="wenzi">路由器</span><div class="out"><div class="inner"></div><span class="huang"></span></div></li>
    <li><span class="wenzi">智能硬件</span><div class="out"><div class="inner"></div><span class="huang"></span></div></li>

</ul>

<script>
    $(function () {
        $("ul li").mouseenter(function () {
            $(this).children(".out").children(".inner").stop().slideUp();
        })
        $("ul li").mouseleave(function () {
            $(this).children(".out").children(".inner").slideDown();
        })

    })

</script>
</body>
</html>