大案例：購物車宣傳頁

時間 2019-12-12

標籤案例購物車宣傳简体版

原文原文鏈接

1、案例介紹

採用HTML5和CSS3製做
使用用幾幅很大的圖片或色塊作背景，再添加一些簡單的內容，實現全屏切換的效果
適用於製做各類宣傳頁、活動頁

2、知識點

使用動畫分爲js實現的動畫（幀動畫，使用定時器，每隔一段時間更改當前元素的狀態）和css3顯示的動畫（補間動畫，加過渡只需狀態改變產出動畫，多個節點來控制動畫），css3動畫性能會更好，而且在支持H5C3的瀏覽器儘量的使用css3動畫，好比移動端開發
2D轉換有縮放scale、位移translate、旋轉rotate、傾斜skew，關於動畫速度有ease、linear、ease-in、ease-out、ease-in-out都是特殊的動畫速度，都是由貝塞爾曲線，2D轉換和3D轉換的區別一是參數，二是在移動端使用3D轉換能夠優化性能(若是設備有3D加速引擎GPU能夠提升性能,是2D轉換是沒法調用GPU)
背景圖的百分比不是按照容器的大小去換算的，百分比的背景圖定位基於容器的寬度-背景的寬度，計算公式：背景圖的X定位 = （容器的寬度 - 背景的寬度） * 百分比

3、實現方法：fullPage.js 插件

①介紹：fullPage.js 是一個基於 jQuery 的插件，它可以很方便、很輕鬆的製做出全屏網站，主要功能有支持鼠標滾動、支持前進後退和鍵盤控制多個回調函數、支持手機平板觸摸事件、支持 CSS3 動畫、支持窗口縮放、窗口縮放時自動調整、可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式等等。兼容 jQuery 1.7+，兼容IE8+。下載和了解更多能夠點擊這裏。javascript

②原理：css

window.onmousewheel=function(){
    //代碼
}

③使用：html

引入文件java

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>

<!-- jquery.easings.min.js 用於 easing 參數，也可使用完整的 jQuery UI 代替，若是不須要設置 easing 參數，可去掉改文件 -->
<script src="js/jquery.easings.min.js"></script>

<!-- 若是 scrollOverflow 設置爲 true，則須要引入 jquery.slimscroll.min.js，通常狀況下不須要 -->
<script src="js/jquery.slimscroll.min.js"></script>

<script src="js/jquery.fullPage.js"></script>

HTMLjquery

div id="dowebok">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
        <div class="slide">第三屏的第三屏</div>
        <div class="slide">第三屏的第四屏</div>
    </div>
    <div class="section">第四屏</div>
</div>

JavaScript初始化css3

$(function(){
    $(選擇器).fullpage();
});

④經常使用配置：web

4、具體操做

①目錄結構：

②思路

第一步：八頁屏全屏切換效果，使用fullpage插件，以及公用的元素（所有屏都有的元素和效果）
第二步：第一屏的佈局和動畫實現
第三步：第一屏的佈局和動畫實現
第四步：第二屏的佈局和動畫實現
第五步：2、三屏的切換效果和第三屏的佈局以及動畫實現
第六步：3、四屏的切換效果和第四屏的佈局以及動畫實現
第七步：4、五屏的切換效果和第五屏的佈局以及動畫實現
第八步：5、六屏的切換效果和第六屏的佈局以及動畫實現
第九步：6、七屏的切換效果和第七屏的佈局以及動畫實現
第十步：第八屏的佈局以及動畫實現

③代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>購物車</title>
    <link rel="stylesheet" href="css/jquery.fullPage.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 公用的元素 -->
    <a href="#" class="go"><img src="images/00-go.png" alt=""></a>
    <a href="javascript:;" class="more"><img src="images/00-more.png" alt=""></a>
    <!-- 總體容器 -->
    <!-- 指示器點容器navigation -->
    <div class="container">
        <!-- 每個切換的屏幕 -->
        <!-- 第一屏 -->
        <div class="section screen01">
            <!-- 若是是大屏幕,是基於top定位,脫離顯示區域,固定在一個區域內,用一個固定大小的容器裝內容 -->
            <div class="content">
                <!-- 電腦,平板,手機 -->
                <div class="pad"><img src="images/01-pad.png" alt=""></div>
                <div class="pc"><img src="images/01-pc.png" alt=""></div>
                <div class="phone"><img src="images/01-phone.png" alt=""></div>
            </div>
        </div>
        <!-- 第二屏 -->
        <div class="section screen02">
            <!-- 動畫特色:徹底進入當前屏的時候執行動畫,能夠採用經過js dom操做增長類 -->
            <div class="content">
                <!-- 商品列表 -->
                <div class="goods"><img src="images/02-goods.png" alt=""></div>
                <!-- 手機 -->
                <div class="phone"><img src="images/02-phone.png" alt=""></div>
                <!-- 搜索框、關鍵字-->
                <div class="input">
                    <img class="search" src="images/02-search.png" alt="">
                    <img class="key" src="images/02-key.png" alt="">
                </div>
                <!-- 文字 -->
                <div class="text">
                    <img class="text01" src="images/02-text01.png" alt="">
                    <img class="text02" src="images/02-text02.png" alt="">
                </div>
            </div>
        </div>
        <div class="section screen03">
            <div class="content">
                <div class="phone"><img src="images/02-phone.png" alt=""></div>
                <div class="change">
                    <img src="images/03-change01.png" alt="">
                    <img src="images/03-change02.png" alt="">
                </div>
                <div class="cart">
                    <img src="images/03-card01.png" alt="">
                    <img src="images/03-card02.png" alt="">
                </div>
            </div>
        </div>
        <div class="section screen04">
            <div class="content">
                <!-- 白雲 -->
                <div class="cloud"><img src="images/04-clloud.png" alt=""></div>
                <!-- 文字 -->
                <div class="text">
                    <img src="images/04-text01.png" alt="">
                    <img src="images/04-text02.png" alt="">
                </div>
                <!-- 購物車 -->
                <div class="cart"><img src="images/04-cart.png" alt=""></div>
                <!-- 手機 -->
                <div class="phone"><img src="images/02-phone.png" alt=""></div>
                <!-- 收貨地址 -->
                <div class="address">
                    <img src="images/04-address01.png" alt="">
                    <img src="images/04-address02.png" alt="">
                </div>
            </div>
        </div>
        <div class="section screen05">
            <div class="content">
                <!-- 文字 -->
                <div class="text"><img src="images/05-text.png" alt=""></div>
                <!-- 手機 -->
                <div class="phone"><img src="images/02-phone.png" alt=""></div>
                <!-- 銀行卡 -->
                <div class="card">
                    <img class="cardImg" src="images/05-card.png" alt="">
                    <img class="orderImg" src="images/05-order.png" alt="">
                </div>
                <!-- 點鼠標 -->
                <div class="mouse">
                    <img class="m1" src="images/05-mouse01.png" alt="">
                    <img class="m2" src="images/05-mouse02.png" alt="">
                    <img class="hand" src="images/05-hand.png" alt="">
                </div>
            </div>
        </div>
        <div class="section screen06">
            <div class="content">
                <!-- 白雲 -->
                <div class="cloud">
                    <img src="images/06-cloud01.png" alt="">
                    <img src="images/06-cloud02.png" alt="">
                </div>
                <!-- 文字 -->
                <div class="text">
                    <img src="images/06-text01.png" alt="">
                    <img src="images/06-text02.png" alt="">
                </div>
                <!--盒子 -->
                <div class="box"><img src="images/06-box.png" alt=""></div>
                <!-- 汽車 -->
                <div class="car">
                    <img class="carImg" src="images/06-car.png" alt="">
                    <img class="worker" src="images/06-worker.png" alt="">
                    <img class="say" src="images/06-say.png" alt="">
                </div>
                <!-- 收貨人 -->
                <div class="person">
                    <img class="personImg" src="images/06-person.png" alt="">
                    <img class="door" src="images/06-door.png" alt="">
                </div>
            </div>
        </div>
        <div class="section screen07">
            <div class="content">
                <div class="star">
                    <img src="images/07-star.png" alt="">
                    <img src="images/07-star.png" alt="">
                    <img src="images/07-star.png" alt="">
                    <img src="images/07-star.png" alt="">
                    <img src="images/07-star.png" alt="">
                </div>
                <div class="text"><img src="images/07-text.png" alt=""></div>
            </div>
        </div>
        <div class="section screen08">
            <div class="content">
                <div class="btn">
                    <img src="images/08-btn1.png" alt="">
                    <img src="images/08-btn2.png" alt="">
                </div>
                <div class="again"><img src="images/08-again.png" alt=""></div>
                <div class="hand"><img src="images/08-hand.png" alt=""></div>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.fullPage.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

HTML

/* 公用樣式 */
.go{
    widows: 100px;
    height: 100px;
    border-radius: 50%;
    position: fixed;
    right: 30px;
    top: 30px;
    z-index: 1001;
}
.more{
    position: fixed;
    right: 60px;
    bottom: 80px;
    z-index: 1001;
    animation: more 0.4s linear infinite alternate;
}
/* 內容容器 */
.content{
    width: 900px;
    height: 600px;
    /* background: rgba(0,0,0,.1); */
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -450px;
}
/* 第一屏佈局 */
.screen01{
    background:url("../images/01-bg.png") no-repeat center bottom;
}
.screen01 .pad{
    position: absolute;
    left: 0px;
    top: -200px;
    animation: phone01 1.5s linear infinite alternate;
}
.screen01 .pc{
    position: absolute;
    left: -400px;
    top: -200px;
    animation: pc01 0.5s linear infinite alternate;
}
.screen01 .phone{
    position: absolute;
    right: -300px;
    top: -300px;
    /* 調用動畫 */
    animation: phone01 1s linear infinite alternate;
}
/* 第一屏動畫 */
@keyframes phone01{
    from{
        transform: translateY(-30px);
    }to{
        text-replace: transform(30px);
    }
}
@keyframes more{
    from{
        transform: translateY(-10px);
    }to{
        text-replace: transform(10px);
    }
}
@keyframes pc01{
    from{
        transform: translateY(-20px);
    }to{
        text-replace: transform(20px);
    }
}
@keyframes pad01{
    from{
        transform: translateY(-40px);
    }to{
        text-replace: transform(40px);
    }
}
/* 第二屏 */
.screen02 {
    background: url("../images/02-bg.png") no-repeat center bottom;
}
.screen02 .goods{
    position: absolute;
    left: 50%;
    margin-left: -445px;
    bottom: 225px;
    transform-origin: right bottom;
    transform: scale(0);
}
.screen02 .phone{
    position: absolute;
    left: 496px;
    top: 160px;
    opacity: 0;
    z-index: 1001;
}
.screen02 .input{
    position: absolute;
    right: 0px;
    top: -78px;
    /* 右上角 transform:scale(1); */
    /* 中心位置 transform: translate(-220px,200px); */
    /* 最右邊 transform: translate(2000px,130px); */
    transform-origin: right top;
    opacity: 0;
}
.screen02 .input .key{
    position: absolute;
    left: 50px;
    top: 20px;
    opacity: 0;
}
.screen02 .text{
    text-align: center;
    margin-top: -230px;
}
.screen02 .text .text02{
    position: absolute;
    opacity: 0;
}
/* 第二屏動畫 */
.screen02.now .text .text01{
    position: absolute;
    opacity: 0;
}
.screen02.now .text .text02{
    position: static;
    opacity: 1;
    transition: opacity 1s;
}
.screen02.now .input{
    /* 動畫完成狀態控制,默認屬性backwards回到起點,forwards保持位置 */
    animation: input02 3s linear forwards;
}
.screen02.now .input .key{
    opacity: 1;
    transition: all 1s linear 1s;
}
.screen02.now .goods{
    /* none清空因此轉換屬性 */
    transform: none;
    transition: all 1s linear 2s;
}
@keyframes input02 {
    /* 搜索框在右邊動畫的出來 */
    /* 在顯示器中間停留,顯示關鍵字 */
    /* 商品列表動畫顯示,搜索框動畫位移到右上角 */
    0%{
        /* 初始位置 */
        opacity: 1;
        transform: translate(2000px,130px);
    }
    33.3%{
        transform: translate(-220px,200px);
    }
    67%{
        transform: translate(-220px,200px);
    }
    100%{
        opacity: 1;
    }
}
/* 第二屏到第三屏的過渡動畫 和頁面的滾動同步動畫時間保持一致 */
.screen02.leaved .phone{
    animation: phone02 1s linear;
}
@keyframes phone02{
    from{
        opacity: 1;
    }
    to{
        opacity: 1;
        transform: translate(-390px,835px);
    }
}
/* 第三屏 */
.screen03{
    background: url("../images/03-bg.png") no-repeat center;
}
.screen03 .phone{
    position: absolute;
    left:100px;
    top: 50px;
    display: none;
}
.screen03 .change{
    position: absolute;
    right: 20px;
    bottom: 270px;
}
.screen03 .change img:last-child{
    position: absolute;
    opacity: 0;
}
.screen03 .cart{
    position: absolute;
    right: 115px;
    bottom: 150px;
}
.screen03 .cart img:last-child{
    position: absolute;
    opacity: 0;
}
.screen03.now .change img:first-child{
    display: none;
}
.screen03.now .change img:last-child{
    position: static;
    opacity: 1;
    transition: all 1s linear;
}
.screen03.now .cart img:first-child{
    display: none;
}
.screen03.now .cart img:last-child{
    position: static;
    opacity: 1;
    transition: all 1s linear;
}
.screen03.now .phone{
    display: block;
    z-index: 1001;
}
/* 第三屏到第四屏的過渡動畫 */
.screen03.leaved .phone{
    /*transform的組合寫法中,若是先旋轉,座標軸也會旋轉,因此最好先位移再旋轉 */
    /* transform: translate(300px,1140px) rotate(45deg); */
    animation: phone03 1s linear;
}
@keyframes phone03{
    frim{}
    to{
        transform: translate(300px,1140px) rotate(45deg);
    }
}
/* 第四屏 */
.screen04{
    background: url("../images/04-bg.png") no-repeat center bottom;
}
.screen04 .cloud{
    position: absolute;
    left: -400px;
    top: -300px;
    animation: cloud04 20s linear infinite alternate;
}
@keyframes cloud04{
    from{

    }
    to{
        transform: translateX(1000px);
    }
}
.screen04 .text{
    text-align: center;
    margin-top: -120px;
}
.screen04 .text img:last-child{
    position: absolute;
    opacity: 0;
}
.screen04 .text.show img:first-child{
    position: absolute;
    opacity: 0;
}
.screen04 .text.show img:last-child{
    position: static;
    opacity: 1;
    transform: all 1s linear;
}
.screen04 .cart{
    text-align: center;
    margin-top: 325px;
    position: relative;
    z-index: 1002;
}
.screen04 .phone{
    position: absolute;
    top: 240px;
    left: 400px;
    transform: rotate(45deg);
    opacity: 0;
}
.screen04 .address{
    position: absolute;
    width: 500px;
    height: 500px;
    left: 50%;
    transform: translate(-60%);
    bottom: 200px;
    display: none;
}
.screen04 .address img:last-child{
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translate(-35%);
    z-index: 1;
    display: none;
}
.screen04.now .phone{
   opacity: 1;
   transform: translateX(1500px) rotate(45deg);
   transition: transform 2s linear;
}
.screen04.now .cart{
    transform: translateX(1500px);
    transition: all 2s linear;
}
/* 第五屏 */
.screen05 .text{
    text-align: center;
    margin-top: -200px;
}
.screen05 .phone{
    position: absolute;
    bottom: 250px;
    left: 150px;
    transform: rotate(30deg);
    opacity: 0;
    z-index: 1001;
}
.screen05 .card{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1002;
}
.screen05 .card .cardImg{
    position: relative;
    z-index: 1;
}
.screen05 .card .orderImg{
    position: absolute;
    left: 80px;
    top: -150px;
    transform: translateY(80px);
}
.screen05 .mouse{
    position: absolute;
    right: 0px;
    top: 0;
}
.screen05 .mouse .m1,
.screen05 .mouse .m2{
    position: absolute;
    top: 140px;
    right: 0;
}
.screen05 .mouse .m2{
    opacity: 0;
}
.screen05 .mouse .hand{
    position: absolute;
    top: 200px;
    right: 50px;
    transform: translateY(500px);
}
/* 第五屏動畫 */
.screen05.now .mouse .hand{
    transform: none;
    transition: all 1s linear;
}
.screen05.now .mouse .m2{
    opacity: 1;
    transition: all 0.2s linear 1s;
}
.screen05.now .phone{
    animation: phone05 2s linear 1.2s forwards;
}
@keyframes phone05{
    from{
        transform: translateY(-1000px) rotate(30deg);
        opacity: 1;
    }
    50%{
        transform: translateY(-150px) rotate(30deg);
    }
    to{
        opacity: 1;
        transform: rotate(30deg);
    }
}
.screen05.now .card .orderImg{
    transform: none;
    transition: all 1s linear 2.2s;
}
/* 第五到第六屏過渡 */
.screen05.leaved .phone{
    animation: phone05-06 1s linear;
}
@keyframes phone05-06{
    from{
        opacity: 1;
        transform: rotate(30deg);
    }
    to{
        opacity: 1;
        transform: translateY(750px) scale(0.2) rotate(30deg);
    }
} 
/* 第六屏 */
.screen06{
    background: url("../images/06-bg.png") no-repeat 0% bottom;
}
.screen06.now {
    background: url("../images/06-bg.png") no-repeat 100% bottom;
    transition: background 1s linear 1s;
}
.screen06 .cloud{
    position: absolute;
    top: -300px;
    left: 0;
}
.screen06 .cloud img:first-child{
    animation: cloud06 40s linear infinite alternate;
}
.screen06 .cloud img:last-child{
    position: absolute;
    top: 50px;
    left: 0;
    animation: cloud06 20s linear infinite alternate;
}
@keyframes cloud06{
    from{}
    to{
        transform: translateX(1000PX);
    }
}
.screen06 .text{
    position:  absolute;
    top: -100px;
    left: -30px;
    z-index: 1002;
}
.screen06 .text img:last-child{
    position: absolute;
    opacity: 0;
    left: 0;
    top: 0;
}
.screen06 .box{
    position: absolute;
    top: 0;
    left: 200px;
    z-index: 1002;
}
.screen06 .box.show{
    animation: box06 2s linear forwards;
}
@keyframes box06{
    from{
        transform: translateX(-500px);
    }
    50%{
        transform: none;
    }
    to{
        transform: translateY(490px);
    }
}
.screen06 .car{
    position: absolute;
    bottom: 0;
    left: 160px;
    z-index: 1003;
}
.screen06 .car img{
    position: absolute;
    opacity: 0;
    /* left: 0;
    right: 0; */
}
.screen06 .car .carImg{
    opacity: 1;
    position: relative;
}
.screen06 .car .worker{
    left:0;
    bottom: 0;
    opacity: 1;
    transform: scale(0);
    transform-origin: left bottom;
}
.screen06.now .car .worker{
    animation: worker06 2.1s linear 2s forwards;
}
@keyframes worker06{
    from{opacity: 1;}
    33.3%{transform: scale(1);}
    66.7%{transform: scale(1) translateY(-100px);}
    100%{transform: scale(1) translateY(-100px) translateX(250px);}
}
.screen06 .car .say{
    right: -280px;
    top: -400px;
}
.screen06.now .car .say{
    opacity: 1;
    transition: all 0.5s linear 4.1s;
}
.screen06 .person{
    position: absolute;
    right: -50px;
    bottom: 95px;
}
.screen06 .person .door{
    opacity: 0;
}
.screen06 .person .personImg{
    position: absolute;
    right: 40px;
    top: -90px;
    transform-origin: right bottom;
    transform: scale(0);
}
.screen06.now .person .door {
    opacity: 1;
    transition: all 0.4s linear 4.6s;
}
.screen06.now .person .personImg{
    transform: none;
    right: 200px;
    transition:  transform 0.5s linear 5s,right 0.5s linear 5.5s;
}
.screen06.now .text img:first-child{
    opacity: 0;
    transition: all 0.1s linear 3s;
}
.screen06.now .text img:last-child{
    opacity: 1;
    transition: all 1s linear 3s;
}
/* 第七屏 */
.screen07{
    background: url("../images/07-bg.png") no-repeat center bottom;
}
.screen07 .star{
    position: absolute;
    left: 110px;
    top: 40px;
}
.screen07 .star img{
    opacity: 0;
}
.screen07 .star.show img:first-child{
    opacity: 1;
    transition: all 1s linear 1s;
}
.screen07 .star.show img:nth-child(2){
    opacity: 1;
    transition: all 1s linear 1.2s;
}
.screen07 .star.show img:nth-child(3){
    opacity: 1;
    transition: all 1s linear 1.4s;
}
.screen07 .star.show img:nth-child(4){
    opacity: 1;
    transition: all 1s linear 1.3s;
}
.screen07 .star.show img:last-child{
    opacity: 1;
    transition: all 1s linear 1.8s;
}
.screen07 .text{
    position: absolute;
    left: 120px;
    top: 80px;
    opacity: 0;
    transform-origin: left bottom;
    transform: scale(0);
}
.screen07 .text.show{
    opacity: 1;
    /* transform: none; */
    animation: text07 1.5s linear 2.3s forwards;
}
@keyframes text07{
    from{
        transform: scale(1.2);
    }
    to{
        transform :none;
    }
}
/* 第八屏 */
.screen08{
    background: url("../images/08-snow.png") repeat-y center top;
}
.screen08 .btn{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.screen08 .btn img:last-child{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}
.screen08 .btn:hover img:last-child{
    opacity: 1;
}
.screen08 .again{
    position: absolute;
    right: -100px;
    top: 80px;
}
.screen08 .hand{
    position: absolute;
    left: 50%;
    top: 100px;
    transform: translateX(-50%);
}

css

$(function(){
    // 初始化fullpage組件
    $(".container").fullpage({
        //1.設置每個屏幕的背景顏色
        sectionsColor:["#FE5D41","#84a2d4","#ef674d","#ffeedd","#d04759","#84d9ed","#ef4759","#7bd1ed"],
        //2.設置屏幕內容的對齊方式,默認是垂直居中的
        verticalCentered:false,
        //3.設置導航 設置指示器 點容器
        navigation: true,
        //4.監聽進入某一屏的時候,回調函數(加載完所要作的事)
        afterLoad:function(link,index){
            // index序號1開始,表示當前屏的序號
            $(".section").eq(index-1).addClass("now");
        },
        //5.離開某一屏的時候出發觸發
        onLeave:function(index,nextIndex,dirction){
            if(index==2 && nextIndex==3){
                //當前是從第二頁到第三頁
                $('.section').eq(index-1).addClass('leaved');
            }else if(index==3 && nextIndex==4){
                //當前是從第三頁到第四頁
                $(".section").eq(index-1).addClass("leaved");
            }else if(index==5 && nextIndex==6){
                //當前是從第五頁到第六頁
                $(".section").eq(index-1).addClass("leaved");
                $(".screen06 .box").addClass('show');
            }else if(index==6 && nextIndex==7){
                //當前是從第6頁到第7頁
                $(".screen07 .star").addClass("show");
                $(".screen07 .text").addClass("show");
            }
        },
        //6. 在組件初始完畢或者內容渲染完畢的時候,執行該事件
        afterRender:function(){
            //jquery自己沒有的方法經過$.fn的方式追加
            //點擊更多切換下一頁
            $(".more").on("click",function(){
                $.fn.fullpage.moveSectionDown();
            });
            // 當第四屏的購物車動畫結束以後執行收貨地址的動畫,jquery的動畫函數的回調函數能夠監聽
            //css3中,過渡transitionend 動畫animationed也能夠監聽
            $(".screen04 .cart").on("transitionend",function(){
                $(".screen04 .address").show().find("img:last").fadeIn(1000);
                $(".screen04 .text").addClass("show");
            });
            //第八屏功能
            //1.手跟着鼠標移動
            $(".screen08").on("mousemove",function(e){
                $(this).find(".hand").css({
                    left:e.clientX-450,
                    top:e.clientY-300
                });
            }).find(".again").on("click",function(){
                    //2.點擊再拉一次重置動畫回到第一頁
                    //上述作動畫用了:now類,leaved類,show類,加css屬性(加了style屬性),
                    $(".now,.leaved,.show").removeClass("now").removeClass("leaved").removeClass("show");
                    //用jquery的show()和fadein()(也增長了一個style屬性)
                    $(".content [style]").removeAttr("style");
                    //調回第一頁
                    $.fn.fullpage.moveTo(1);
            });
        },
        //頁面切換的時間,默認是700
        scrollingSpeed:1000,
    });
});

JavaScript

④效果展現（由於單次只能上傳10M文件，因此圖片畫質略渣，如需所有文件，請聯繫本人）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。