jquery实现手风琴效果

简单的手风琴效果实现实际比看起来简单,只是改变当前的元素宽度和其他元素的宽度,其代码如下(图片什么的都要换成自己噢)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        .box{width: 100%;height: 260px;margin: 10px auto;}
        ul li{list-style: none;float: left;width: 200px;height: 260px;position: relative;}
        ul li div{width: 100%;height: 260px;}
        ul .text{width: 100%;height: 260px;background: rgba(0,0,0,0.2);position: absolute;}
        .text h1{width: 30px;font-size: 30px;color: #fff;margin: 30px auto;}
        .bg1{background: url("imgs/1.jpg") center;}
        .bg2{background: url("imgs/2.jpg") center;}
        .bg3{background: url("imgs/3.jpg") center;}
        .bg4{background: url("imgs/4.jpg") center;}
        .bg5{background: url("imgs/5.jpg") center;}
        .bg6{background: url("imgs/6.jpg") center;}
    </style>
    <script src="libs/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            $('ul li').hover(function () {
                $(this).find('.text').css('display','none');
                $(this).stop().animate({
                    width : '400px'
                }).siblings().stop().animate({
                    width : '160px'
                });


            }, function () {
                $(this).children('.text').css('display','block');
                $('ul li').stop().animate({
                    width : '200px'
                })
            })
        })
    </script>
</head>
<body>
<div class="box">
    <ul>
        <li class="li1">
            <div class="text"><h1>简单手风琴1</h1></div>
            <div class="bg1"></div>
        </li>
        <li>
            <div class="text"><h1>简单手风琴2</h1></div>
            <div class="bg2"></div>
        </li>
        <li>
            <div class="text"><h1>简单手风琴3</h1></div>
            <div class="bg3"></div>
        </li>
        <li>
            <div class="text"><h1>简单手风琴4</h1></div>
            <div class="bg4"></div>
        </li>
        <li>
            <div class="text"><h1>简单手风琴5</h1></div>
            <div class="bg5"></div>
        </li>
        <li>
            <div class="text"><h1>简单手风琴6</h1></div>
            <div class="bg6"></div>
        </li>
    </ul>
</div>
</body>
</html>

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭