手风琴JS特效源码

妖狐艹你老母 2022-08-04 05:09 123阅读 0赞

HTML和CSS部分

<!DOCTYPE html>
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" type="text/css" href="style.css">
            <script type="text/javascript" src="base.js"></script>
            <title>手风琴</title>
        </head>
        <body>
            <div class="contain" id="contain">
                <ul>
                    <li class="big"> <a href="#">
                        <img src="baihuzi.jpg"/>
                        <div class="info">
                            <h3>白胡子海贼团</h3>
                            <p>船长</p>
                            <p>震震果实能力者</p>
                        </div>
                        <div class="line"></div>
                        <div class="mask"></div>
                        </a>
                    </li>
                    <li><a href="#">
                        <img src="aisi.jpg"/>
                        <div class="info">
                            <h3>艾斯</h3>
                            <p>白胡子二番队队长</p>
                            <p>烧烧果实能力者</p>
                        </div>
                        <div class="line"></div>
                        <div class="mask"></div>
                        </a>
                    </li>
                    <li><a href="#">
                        <img src="lufei.jpg"/>
                        <div class="info">
                            <h3>路飞</h3>
                            <p>草帽海贼团船长</p>
                            <p>橡胶果实能力者</p>
                        </div>
                        <div class="line"></div>
                        <div class="mask"></div>
                        </a>
                    </li>
                    <li><a href="#">
                        <img src="suolong.jpg"/>
                        <div class="info">
                            <h3>索隆</h3>
                            <p>草帽海贼团</p>
                            <p>要成为天下第一剑豪</p>
                        </div>
                        <div class="line"></div>
                        <div class="mask"></div>
                        </a>
                    </li>
                    <li><a href="#">
                        <img src="shanzhi.jpg"/>
                        <div class="info">
                            <h3>山治</h3>
                            <p>草帽海贼团</p>
                            <p>寻找All Blue</p>
                        </div>
    
                        <div class="mask"></div>
                        </a>
                    </li>
                </ul>
            </div>
        </body>
    </html>
    
    CSS
    *{
        margin: 0px;
        padding: 0px;
    }
    .contain{
        width: 1850px;
        height: 180px;
        border: 1px solid #ccc;
        padding: 0px;
    }
    .contain ul{
        float: left;
    }
    .contain li{
        width: 320px;
        height: 180px;
        float: left;
        overflow: hidden;
    }
    .contain li a{
        display: block;
        height: 180px;
        width: 320px;
        position: relative;
        overflow: hidden;
        text-decoration: none;
    }
    .contain li a img{
        position: absolute;
        bottom: 0px;
        right: -30px;
        height: 120px;
        width: 160px;
    }
    .contain .info{
        position: absolute;
        top: 0px;
        left: 0px;
    }
    .contain .info h3{
        font-size: 1.5em;
        font-weight: bold;
        width: 150px;
        padding: 5px 5px;
        color: #00ffff;
    }
    .line{
        position: absolute;
        right: 0px;
        width: 0px;
        height: 180px;
        border: 1px dashed #ccc;
    }
    .contain .mask{
        position: absolute;
        top: 0px;
        left: 0px;
        height: 180px;
        width: 320px;
        opacity: 0;
        background: #000;
    }
    .contain:hover .mask{
        opacity: 0.2;
    }
    .contain li.big,li.big a{
        width: 570px;
    }
    .contain li.big img{
        width: 320px;
        height: 180px;
        right: 0px;
        bottom: 0px;
    }
    .contain li.big h3{
        font-size: 1.7em;
        width: 250px;
    }
    .contain li.big p{
        font-size: 1.5em;
    }
    .contain li.big a:hover .mask{
        opacity: 0;
        width: 570px;
    }

JS部分源码

**效果图**  
![这里写图片描述][20150818112415318]

[20150818112415318]: /images/20220731/04cf41303d9a4e7f9e437a9628019eba.png