jQuery案例

手风琴

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .wrap{
            width: 1178px;
            height: 174px;
            overflow: hidden;
            position: relative;
            margin: 0 auto;

        }
        .wrap  ul li{
            float: left;
            width: 210px;
            height: 174px;
            overflow: hidden;
        }
        .wrap  ul{
            width: 2000px;
        }
        .wrap  ul li img{
            width: 550px;
            height: 174px;
        }
    </style>

<body>
    <div class="wrap">
            <ul>
                <li style='width:550px'><img src="http://pic.shejiben.com/hot_sjb/377_8180.jpg?1462261126" alt=""></li>
                <li ><img src="http://pic.shejiben.com/hot_sjb/377_8288.jpg?1464830033" alt=""></li>
                <li ><img src="http://pic.shejiben.com/hot_sjb/377_8155.jpg?1460709517" alt=""></li>
                <li ><img src="http://pic.shejiben.com/hot_sjb/377_7937.jpg?1456984280" alt=""></li>
            </ul>
        </div>
</body>

<script>
    $(".wrap").find("li").click(function(){
        $(this).stop().animate({
            width:550
        })
        $(this).siblings().stop().animate({
            width:210
        })
    })
</script>

艺龙酒店

<script>
        
        $("#main").find("li").mouseover(function(){
            $(this).stop().animate({
                width:400
            })
            .children(".des").stop().hide()
            .parent().siblings().stop().animate({
                width:160
            })
            .children(".des").stop().show();
        })
        $("#main").find("li").mouseout(function(){
            $("#main").find("li").stop().animate({
                width:200
            }).children(".des").stop().show()
        })
    
    </script>
    
<body>
        <div id="main">
            <ul>
                <li>
                    <div class="des"><h4>园林酒店</h4></div>
                    <div style="background: url(img/1.jpg) center;"></div>
                </li>
                <li>
                    <div class="des"><h4>设计师酒店</h4></div>
                    <div style="background: url(img/2.jpg) center;"></div>
                </li>
                <li>
                    <div class="des"><h4>青年旅社</h4></div>
                    <div style="background: url(img/3.jpg) center;"></div>
                </li>
                <li>
                    <div class="des"><h4>特色客栈</h4></div>
                    <div style="background: url(img/4.jpg) center;"></div>
                </li>
                <li>
                    <div class="des"><h4>海岛酒店</h4></div>
                    <div style="background: url(img/5.jpg) center;"></div>
                </li>
                <li>
                    <div class="des"><h4>海外温泉</h4></div>
                    <div style="background: url(img/6.jpg) center;"></div>
                </li>
            </ul>
        </div>
        
    </body>

<style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            ul li {
                list-style: none;
            }
            #main {
                width: 100%;
                height: 260px;
                margin: 40px 5%;
            }
            .top {
                width: 100%;
            }
            #main ul li {
                width: 200px;
                height: 260px;
                float: left;
                position: relative;
            }
            #main ul li div {
                width: 100%;
                height: 260px;
            }
            #main ul li div.des {
                position: absolute;
                left: 0;
                top: 0;
                background: rgba(0,0,0,.3);
                
                }
                #main ul li div.des h4 {
                    color: #FFF;
                    font-size: 30px;
                    padding: 30px;
                    width: 30px;
                    margin: 0 auto;
                    
                }
        </style>

猜你喜欢