js艺龙

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>艺龙</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        #box {
            margin: 50px auto;
            width: 1205px;
        }
        #box li {
            position: relative;
            float: left;
            width: 200px;
            height: 260px;
            cursor: pointer;
        }
        #box li .shadow {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .2);
        }
        #box li .text {
            position: absolute;
            left: 0;
            right: 0;
            margin: 30px auto 0;
            width: 40px;
            font-size: 30px;
            color: #fff;
            text-align: center;
        }
    </style>
</head>
<body>
    <ul id="box">
        <li style="background:url(images/1.jpg) center no-repeat;">
            <div class="shadow"></div>
            <div class="text">园林酒店</div>
        </li>
        <li style="background:url(images/2.jpg) center no-repeat;">
            <div class="shadow"></div>
            <div class="text">设计师酒店</div>
        </li>
        <li style="background:url(images/3.jpg) center no-repeat;">
            <div class="shadow"></div>
            <div class="text">青年旅社</div>
        </li>
        <li style="background:url(images/4.jpg) center no-repeat;">
            <div class="shadow"></div>
            <div class="text">特色客栈</div>
        </li>
        <li style="background:url(images/5.jpg) center no-repeat;">
            <div class="shadow"></div>
            <div class="text">海岛酒店</div>
        </li>
        <li style="background:url(images/6.jpg) center no-repeat;">
            <div class="shadow"></div>
            <div class="text">海外温泉</div>
        </li>
    </ul>
    <script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.js"></script>
    <script>
        $('#box li').mouseover(function () {
            $(this).stop(true).animate({
                width:400
            }).children().css('display', 'none').end().siblings().stop(true).animate({width:160}).children().css('display', 'block');
        });
 
        $('#box').mouseout(function () {
            $(this).children().animate({width: 200}).children().css('display', 'block');
        });
    </script>
</body>
</html>
图片更换即可
猜你喜欢
