手风琴页面

软件设计

2017-05-17

啥都不说了，直接上

手风琴页面

1.Html结构代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>手风琴2</title>
        <link rel="stylesheet" type="text/css" href="css/new_file.css"/>
        <script src="js/jquery-1.10.2.min.js"></script>
        <script src="js/new_file.js"></script>
    </head>
    <body>
        <div id="gs">
            <div class="gs gs1">
                <div class="txt">
                    <p class="p1">我的旅行记1我的旅行记3</p>
                    <p class="p2">空山之旅我的旅行记3</p>
                </div>
            </div>
            <div class="gs gs2">
                <div class="txt">
                    <p class="p1">我的旅行记2我的旅行记3</p>
                    <p class="p2">沙漠之旅我的旅行记3</p>
                </div>
            </div>
            <div class="gs gs3">
                <div class="txt">
                    <p class="p1">我的旅行记3我的旅行记3</p>
                    <p class="p2">拉沙之旅我的旅行记3</p>
                </div>
            </div>
            <div class="gs gs4">
                <div class="txt">
                    <p class="p1">我的旅行记4我的旅行记3</p>
                    <p class="p2">雪山之旅我的旅行记3</p>
                </div>
            </div>
        </div>
    </body>
</html>

2.css样式代码

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

#gs {
    width: 1100px;
    height: 429px;
    
}

.gs {
    width: 100px;
    height: 429px;
    float: left;
}

.gs4 {
    width: 789px;
    height: 429px;
}

.gs1 {
    background: url(../img/img/1.jpg) repeat scroll top left;
}
.gs2 {
    background-image: url(../img/img/2.jpg);
}
.gs3 {
    background-image: url(../img/img/3.jpg);
}
.gs4 {
    background-image: url(../img/img/4.jpg);
}

.txt {
    width: 100px;
    height: 429px;
    /*margin: 15px;*/
    background: rgba(0,0,0,0.5);
    cursor: pointer;
}

/*.txt p {
    float: left;
    width: 20px;
    height: 429px;
    color: #fff;
    font-size: 20px;
    margin: 14px;
}*/

.txt p {
    color: #fff;
    float: left;
    margin: 15px;
}

.txt .p1 {
    font-size: 14px;
    width: 14px;
}

.txt .p2 {
    font-size: 12px;
    width: 12px;
}

3.javascript代码

$(function(){
    $(".txt").mouseover(function(){
        $(this).parent().stop(true).animate({"width":"789px"},500).siblings().stop(true).animate({"width":"100px"},500);
    });
});

4.主要：

a.字体竖排垂直：字体大小font-size = 包含字体标签宽度width

b.js中stop()方法：stop()表示结束动画有过渡

　stop(true)表示暂停动画，

stop(true,true)表示立即结束动画，无过渡

c.parent():找到上一级元素

siblings():除了本元素外，其他的。。。

animate():动画效果

手风琴 image