jquery实现手风琴效果

分享两种jquery实现是风琴效果示例。

先看效果图：
状态一

这里写图片描述

下面开始写代码：
其实整个思路很简单，就是当鼠标移在当前块上的时候，当前图片完全显示，其他图片只显示一部分宽度。

html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/demo10.css" />
        <script type="text/javascript" src="js/jquery.min.js" ></script>
        <script type="text/javascript" src="js/demo10.js" ></script>
    </head>
    <body>
        <div id="igs">
            <div class="ig ig1">
                <div class="txt">
                    <p class="p1">成都</p>
                    <p class="p2"><a href="https://baike.baidu.com/item/%E6%88%90%E9%83%BD/128473?fr=aladdin">美食之城</a></p>
                </div>
            </div>
            <div class="ig ig2">
                <div class="txt">
                    <p class="p1">丽江</p>
                    <p class="p2"><a href="https://baike.baidu.com/item/%E4%B8%BD%E6%B1%9F/121726">魅力之城</a></p>
                </div>
            </div>
            <div class="ig ig3">
                <div class="txt">
                    <p class="p1">拉萨</p>
                    <p class="p2"><a href="https://baike.baidu.com/item/%E6%8B%89%E8%90%A8/104792?fr=aladdin">日光城</a></p>
                </div>
            </div>
            <div class="ig ig4">
                <div class="txt">
                    <p class="p1">武汉</p>
                    <p class="p2"><a href="https://baike.baidu.com/item/%E6%AD%A6%E6%B1%89/106764?fr=aladdin">江城</a></p>
                </div>
            </div>
        </div>
    </body>
</html>

css代码：

*{
    padding: 0;
    margin: 0;
    font-family: "微软雅黑";
}

#igs{
    width: 1100px;
    height: 400px;
}
.ig{
    width: 100px;
    height: 400px;
    float: left;
}
.ig4{
    width: 780px;
}
.ig1{
    background: url(../img/pic1.png);
}
.ig2{
    background: url(../img/pic2.png);
}
.ig3{
    background: url(../img/pic3.png);
}
.ig4{
    background: url(../img/pic4.png);
}
.txt{
    width: 100px;
    height: 400px;

    background: rgba(0,0,0,0.5);
}
.txt p{
    width: 14px;
    font-size: 14px;
    color: white;
    float: left;
    margin-top: 30px;
    margin-left: 20px;
}

.txt a{
    color: white;
    text-decoration: none;
}
.txt a:hover{
    color: cornflowerblue;
}
.txt .p1{
    color: greenyellow;
    text-shadow: 5px 5px 5px #CCCCCC;
}

JavaScript代码——这里有两种写法：

第一种（这种可能比较好理解）：

$(function(){
    $(".txt").mousemove(function(){//鼠标经过
        $(this).parent().stop(true).animate({"width":"780px"},1000);//当前图片的宽度显示为全部
        $(this).parent().siblings().stop(true).animate({"width":"100px"},1000);//其他图片宽变小
    });
});

第二种（在理解了第一种的前提下，再看这段代码会觉得很好理解。）

$(function(){
    $(".txt").mousemove(function(){
    $(this).parent().stop(true).animate({"width":"780px"},1000).siblings().stop(true)
    .animate({"width":"100px"},1000);
    });
});

大家有疑问的地方欢迎交流呀。

jquery实现手风琴效果

猜你喜欢