手风琴特效

之前做了一个简单手风琴特效,用了html排版,css样式,还有js的事件,当然,手风琴的话,用纯css也是可以写出来的.我这里还是用了js.

image.png

简单来说就是当鼠标移到相应图片上时,改变width的属性.

首先写页面内容:,在body标签里面放一个盒子和一个列表就可以了:

显示html的代码:

<div id="frame">
    <div id="content">
        <ul class="clearfix">
            <li>
                <p><span>我的个人拉萨之旅丨丨故事之城</span></p>
            </li>
            <li>
                <p><span>我的个人拉萨之旅丨丨故事之城</span></p>
            </li>
            <li>
                <p><span>我的个人拉萨之旅丨丨故事之城</span></p>
            </li>
            <li>
                <p><span>我的个人拉萨之旅丨丨故事之城</span></p>
            </li>
        </ul>
    </div>
</div>

接下来是css的样式:

<style>
    * {
        padding: 0;
        margin: 0;
    }
            
    li {
        list-style: none;
    }
    
    body {
        background: url(img/1_bg.jpg) no-repeat center top;
    }
    
    #frame {
        height: 430px;
        width: 1089px;
        margin: 200px auto 0;
    }
            
    #content {
        height: 100%;
        width: 100%;
        overflow: hidden;
    }
            
    #content ul {
        width: 200%;
    }
            
    #content li {
        float: left;
        position: relative;
        height: 430px;
        width: 100px;
        background-image: url(img/2_1.jpg);
    }
            
    #content li:nth-child(1) {
        background-image: url(img/2_1.jpg);
    }
            
    #content li:nth-child(2) {
                background-image: url(img/4_2.jpg);
    }
            
    #content li:nth-child(3) {
        background-image: url(img/5_3.jpg);
    }
            
    #content li:nth-child(4) {
        background-image: url(img/6_4.jpg);
    }
            
    #content li p {
        position: absolute;
        left: 0;
        top: 0;
        width: 100px;
        height: 100%;
        background-color: rgba(0, 0, 0, .5);
    }
            
    #content li p span {
        display: block;
        width: 14px;
        font-size: 14px;
        margin: 20px auto 0;
        color: #fff;
    }
            
    .clearfix:after {
        content: "";
        display: block;
        clear: both;
    }
</style>

最后就是js事件了:

<script type="text/javascript">
    $(function() {
        var $content = $("#content");
        var $list = $content.find("ul li");
        $list.last().css("width", "789px");
        $list.hover(function() {
            $(this).stop().animate({
                width: 789 + "px"
            }).siblings().stop().animate({
                width: 100 + "px"
            })
        });
    });
</script>

在这里我的是鼠标的hover事件,也就是鼠标悬停事件,在这里可以改为点击事件,这个根据自己的需求来.