JQuery特效之三-----手风琴效果

最新推荐文章于 2023-02-06 11:22:49 发布

Eric010101

最新推荐文章于 2023-02-06 11:22:49 发布

阅读量160

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/oneil2016/article/details/84632742

版权

JavaWeb 专栏收录该内容

85 篇文章 2 订阅

订阅专栏

前端三大组成

html构建内容，css美化，js控制交互，jquery是一个常用js库。

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="static/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="static/css/demo2.css"/>
</head>
<body>
    <div class="pic">
        <ul>
            <li class="pic1">
                <a href="javascript:;">
                    <div class="txt">
                        <p class="p1">作者：eric</p>
                        <p class="p2">我的个人拉萨之旅 | 故事之城</p>
                    </div>
                </a>
            </li>
            <li class="pic2">
                <a href="javascript:;">
                    <div class="txt">
                        <p class="p1">作者：eric</p>
                        <p class="p2">我的个人丽江之旅 | 艳遇之城</p>
                    </div>
                </a>
            </li>
            <li class="pic3">
                <a href="javascript:;">
                    <div class="txt">
                        <p class="p1">作者：eric</p>
                        <p class="p2">我的个人成都之旅 | 美食之城</p>
                    </div>
                </a>
            </li>
        </ul>
        
    </div>    
    <script src="static/lib/jquery/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="static/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="static/js/demo2.js"></script>
</body>
</html>

css：

*{
padding: 0px;
    margin: 0px;
    font-family: cursive;
    list-style-type: none;
}
a
{
    text-decoration: none;
}

.pic
{
    width: 1100px;
    height: 600px;
    margin-top: 70px;
}
.pic ul li{
    float: left;
    width: 100px;
    height: 429px;
}

.pic1
{
    background-image: url("../imgs/01.jpg");
}
.pic2
{
    background-image: url("../imgs/02.jpg");
}
.pic ul .pic3
{
    background-image: url("../imgs/03.jpg");
    width: 789px;
}


.txt
{
background-color: aliceblue;
background: rgba(0,0,0,0.5);
height: 429px;
width: 100px;
}
.txt p{
float: left;
    color: white;
    
}
.txt .p1{
font-size: 12px;
    width: 12px;
    padding: 25px 25px 0px 20px;
}
.txt .p2{
font-size: 14px;
    width: 14px;
    padding: 25px 25px 0px 20px;
}

js：

$(function(){

    
    $(".pic ul li").mouseover(function(){
    
            $(this).stop(true).animate({width:"789px"},1000).siblings().stop(true).animate({width:"100px"},1000);
    
    });
    
});

以上即可。