前端学习笔记 day20 使用fullpage插件完成购物网站（也可以做成广告）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物网站</title>  <!--采用fullpage.js分屏插件-->
    <!--引入初始化css文件+ fullpage.css文件+ 自己写的css文件-->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/jquery.fullPage.css">
    <link rel="stylesheet" href="css/myPage.css">
    <!--由于分屏插件是基于jquery的 所以需要先引入jquery文件-->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <!--如果想要做丰富的动画,可以引入easing.js文件-->
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <!--最后引入fullpage.js分屏插件-->
    <script type="text/javascript" src="js/jquery.fullPage.min.js"></script>
    <script type="text/javascript" src="js/myPage.js"></script>
</head>
<body>
    <a href="#">
        <!--直接进入购物中心-->
        <img src="images/t1ldiffkjfxxxzhxzd-101-101.png" alt="" class="go">
    </a>
    <a href="#">
        <img src="images/next.png" alt="" class="next">
    </a>
    <div id="fullpage">
        <div class="section section1">
            <img src="images/t1wsqsfgnaxxxmjxp6-470-50.png" alt="" class='sec1_01'>
            <img src="images/t1xccqfflgxxxild.png" alt="" class="sec1_02">
            <img src="images/t1iakufbxxxxctz4tl-824-274.png" alt="" class="sec1_03">
        </div>
        <div class="section section2">
            <div class="computer">
                <div class="sec2_search">
                    <img src="images/search-words.png" alt="" class="sec2_words">
                </div>
                <img src="images/search-02-1.png" alt="" class="sec2_full">
                <img src="images/goods-441-218.png" alt="" class="sec2_goods">
            </div>
            <img src="images/words-01-361-25.png" class="sec2_words_top" alt="">
            <img src="images/words-02.png"  class="sec2_words2_top" alt="">
            <img src="images/shirt-02-207-166.png" alt="" class="sec2_sofa">
            <div class="sec2_cover move"></div>
        </div>
        <div class="section section3">
            <div class="sec3_box">
                <img src="images/main.png" alt="" class="sec3_main">
                <div class="sec3_rightBox">
                    <img src="images/img-01.gif" alt="" class="sec3_right">
                    <img src="images/img-01-a.gif" alt="" class="sec3_right1">
                    <img src="images/btn-01.gif" alt="" class="sec3_btn">
                </div>
                <img src="images/t1f.png" alt="" class="sec3_sofa">
            </div>

        </div>
        <div class="section section4">
            <img src="images/cloud.png" alt="" class="sec4_cloud">
            <img src="images/words-04.png" alt="" class="sec4_words">
            <img src="images/words-04-a.png" alt="" class="sec4_words2">
            <div class="sec4_cardBox move">
                <img src="images/t1.png" alt="" class="sec4_card">
                <img src="images/t1sqosfx8bxxa9wx_i-173-47.png" alt="" class="sec4_cardWords">
            </div>
            <div class="sec4_carBox move">
                <img src="images/car.png" alt="" class="sec4_car">
                <img src="images/t1f.png" alt="" class="sec4_sofa">
            </div>


        </div>
        <div class="section section5">
            <img src="images/words-05.png" alt="" class="sec5_words move">
            <img src="images/order-05.png" alt="" class="sec5_order">
            <img src="images/card-05.png" alt="" class="sec5_card">
            <img src="images/t1f.png" alt="" class="sec5_sofa">
            <div class="sec5_hiddenBox">
                <img src="images/mouse-05.png" alt="" class="sec5_mouse">
                <img src="images/mouse-05-a.png" alt="" class="sec5_mouse1">
                <img src="images/hand-05.png" alt="" class="sec5_hand">
            </div>
        </div>
        <div class="section section6">
            <img src="images/box.png" alt="" class="sec6_box">
            <img src="images/cloud-06.png" alt="" class="sec6_cloud">
            <img src="images/words-06-a.png" alt="" class="sec6_words">
            <img src="images/car-06.png" alt="" class="sec6_car">
            <img src="images/88.png" alt="" class="sec6_carWords">

            <img src="images/man.png" alt="" class="sec6_man">
            <img src="images/t1kzyqffnexxbcrepj-139-173.png" alt="" class="sec6_manWords">
            <img src="images/women.png" alt="" class="sec6_women">
            <img src="images/door.png" alt="" class="sec6_door">

        </div>
        <div class="section section7">
            <div class="sec7_box move">
                <img src="images/star.png" alt="" class="sec7_star">
            </div>
            <img src="images/good-07.png" alt="" class="sec7_words">
        </div>
        <div class="section section8">
            <img src="images/btn-08.png" alt="" class="sec8_btn">
            <img src="images/btn-08-a.gif" alt="" class="sec8_btn1">
            <img src="images/again.png" alt="" class="sec8_again">
            <img src="images/hand-08.png" alt="" class="sec8_hand">

        </div>
    </div>
</body>
</html>

html, body, .section {
    min-height: 600px;
    min-width: 1000px;
    /* 最小的宽度和高度 防止 缩放过于变形 */
}
#fp-nav ul li a span {
    background: #ef674d;
}
/*直接进入购物中心 start*/
.go {
    position: fixed;
    right: 73px;
    bottom: 81.6%;
    z-index: 999;
}
.next {
    position: fixed;
    bottom: 80px;
    right: 100px;
    z-index: 10000;
    animation: next 1000ms linear infinite;
}
@keyframes next {
    50%{
        bottom: 120px;
    }
    100% {
        bottom: 80px;
    }
}
/*直接进入购物中心 end*/

/*第一屏start*/
.section1 {
    background: #fadd67 url(../images/t1fpyqfltdxxaiulhh-990-600.png) no-repeat center bottom;

}
/*千百汇线上一站式购物网站*/
.sec1_01 {
    position: absolute;
    right: 20%;
    bottom: 80%;
    animation: sec1_01 3000ms linear infinite;
}
/*沙发*/
.sec1_02 {
    position: absolute;
    left: 36%;
    bottom: 46%;
    animation: sec1_02 3000ms linear infinite;
}
/*多个静止小图*/
.sec1_03 {
    position: absolute;
    left:21%;
    bottom: 20%;
}
/*第一屏end*/

/*第二屏幕start*/
.section2 {
    background: #84a2d4 url(../images/t1zdgpfi8exxca6rfn-2000-600.png) no-repeat center bottom;
    z-index: 2;
}
.sec2_words_top,.sec2_words2_top {
    position: absolute;
    bottom: 540px;
    left: 50%;
    transform: translateX(-50%);
}
.sec2_words2_top {
    z-index: 1000;
    opacity: 0;
}
.computer {
    width: 990px;
    height: 500px;
    /*background-color: rgba(0,0,0,0.3);*/
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}
.sec2_search {
    width: 225px;
    height: 45px;
    background: url(../images/search.png) no-repeat;
    position: absolute;
    right: -30px;
    bottom: 300px;
    display: none;
}
.sec2_words {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 4px;
    opacity: 0;
}
.sec2_full {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 300px;
    display: none;
    z-index: 2;
}
.sec2_goods {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 210px;
    opacity: 0;
}
.sec2_sofa {
    width: 101px;
    position: absolute;
    right: 726px;
    bottom: 341px;
    display: none;
}
.sec2_cover {
    width: 100px;
    height: 56px;
    background-color: #fff;
    position: absolute;
    left: 614px;
    bottom: 350px;
    display: none;
}
/*第二屏幕end*/

/*第三屏start*/
.section3 {
    background: #ef674d;
}
.sec3_box {
    width: 990px;
    height: 600px;
    position: absolute;
    background-color: pink ;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: 1;
}

.sec3_rightBox {
    width: 296px;
    height: 263px;
    /*background-color: pink;*/
    position: absolute;
    right: 150px;
    bottom: 50px;

}
.sec3_right,.sec3_right1 {
    position:absolute
}
.sec3_right1 {
    opacity: 0;
}
.sec3_btn {
    position: absolute;
    left: 0;
    bottom: 40px;
}
.sec3_sofa {
    position: absolute;
    right: 521px;
    bottom: 245px;
    display: none;
}

/*第三屏end*/

/*第四屏start*/
.section4 {
    background: #fed url(../images/t1iresfnxaxxca6rfn-2000-600.png) no-repeat center bottom;
}
.sec4_cloud {
    position: absolute;
    right: 200px;
    bottom: 600px;
}
.sec4_words,.sec4_words2 {
    position: absolute;
    right: 500px;
    bottom: 500px;
}
.sec4_words2 {
    opacity: 0;
}
.sec4_cardBox {
    width: 400px;
    height: 400px;
    position: absolute;
    right: 500px;
    bottom: 100px;
    /*background-color: pink;*/
}
.sec4_card {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 80px;
    opacity: 0;
}
.sec4_cardWords {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 240px;
    opacity: 0;
}
.sec4_carBox {
    width: 400px;
    height: 340px;
    /*background-color: pink;*/
    position: absolute;
    right: 560px;
    bottom: 120px;
}
.sec4_car {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 4;
}
.sec4_sofa {
    position: absolute;
    right: 50px;
    bottom: 210px;
    display: none;
    z-index: 3;
}
/*第四屏end*/

/*第五屏start*/
.section5 {
    background: #d04759 url(../images/t1yisqfa4exxa3gmkg-2000-1500.png);
    perspective: 500;
    -webkit-perspective: 500;
    z-index: 1;   /*后面沙发掉落的时候 父级元素是position：relative 会导致沙发z_index设置无效！！！所以掉落的时候就会被隐藏掉！！！ 所以这里先给父级元素设置z-index*/
}
.sec5_words {
    position: absolute;
    left: 180px;
    bottom: 80%;
    width: 660px;
    opacity: 0;
}
.sec5_words1 {
    animation: sec5_words 3s forwards;  /*forwards 是让动画保存在最后一帧不循环*/
}
@keyframes sec5_words {
    100% {
        opacity: 1;
        transform:  translateZ(100px) rotateY(360deg)
    }
}

.sec5_order {
    position: absolute;
    left: 30%;
    bottom: 270px;
    transform: translateX(-50%);
}
.sec5_card {
    position: absolute;
    left: 20%;
    bottom: 200px;
    z-index: 6;
}
.sec5_sofa {
    position: absolute;
    bottom: 800px;
    left: 25%;
    display: none;
}
.sec5_hiddenBox {
    width: 400px;
    height: 100%;
    /*background-color: red;*/
    position: absolute;
    right: 100px;
    bottom: 0;
    overflow: hidden;
}
.sec5_mouse,.sec5_mouse1 {
    position: absolute;
    right: 180px;
    bottom: 210px;
}
.sec5_mouse1 {
    display: none;
}
.sec5_hand {
    position: absolute;
    right: 236px;
    bottom: -380px;
}
/*第五屏end*/

/*第六屏start*/
.section6 {
    background: #84d9ed url(../images/t1dvj.fn0gxxb0_fua-2500-600.png) no-repeat 25% 100%;
}

.sec6_box {
    position: absolute;
    left: 230px;
    bottom: 500px;
    z-index: 5;
}
.sec6_cloud {
    position: absolute;
    right: 120px;
    bottom: 560px;
    animation: sec6_cloud 100s infinite;
}
@keyframes sec6_cloud {
    50% {
        right: 800px;
    }
    100% {
        right:120px;
    }
}
.sec6_words {
    position: absolute;
    right: 800px;
    bottom: 500px;
    display: none;
}
.sec6_car {
    position: absolute;
    right: 700px;
    bottom: 0;
    z-index: 20;
}
.sec6_carWords {
    position: absolute;
    right: 683px;
    bottom: 125px;
    display: none;
    z-index: 2;
}
.sec6_man {
    width: 10px;
    position: absolute;
    right: 700px;
    bottom: 0;
}
.sec6_women {
    width: 30px;
    position: absolute;
    right: 350px;
    bottom: 190px;
    display: none;
}
.sec6_manWords {
    position: absolute;
    right: 490px;
    bottom: 390px;
    display: none;
}
.sec6_door {
    position: absolute;
    right: 285px;
    bottom: 120px;
    display: none;
}
/*第六屏end*/

/*第七屏start*/
.section7 {
    background: #8ac060 url(../images/t1wf1tfctaxxa3gmkg-2000-1500.png) no-repeat 50% 100%;
}
/*.sec7_star {
    position: absolute;
    left: 420px;
    bottom: 440px;
}*/
.sec7_box {
    /*width: 120px;*/
    width: 4px;
    height: 20px;
    position: absolute;
    left: 420px;
    bottom: 441px;
    overflow: hidden;
}
.sec7_words {
    position: absolute;
    left: 440px;
    bottom: 380px;
    display: none;
}
/*第七屏end*/

/*第八屏start*/
.section8 {
    background: url(../images/ksgw.png);
}
.sec8_btn,.sec8_btn1 {
    position: absolute;
    bottom: 360px;
    left: 50%;
    transform: translateX(-50%);
}
.sec8_btn1 {
    display: none;
}
.sec8_again {
    position: absolute;
    right: 370px;
    bottom: 400px;
}
.sec8_hand {
    position: absolute;
    bottom: -450px;
}
/*第八屏end*/

/*动画组制作*/
@keyframes sec1_01 {
    50%{
        bottom: 72%;
        }
    100%{
    bottom: 80%;
        }
}
@keyframes sec1_02 {
    50% {
        bottom: 50%;
    }
    100% {
        bottom: 46%;
    }

}

View Code

$(function(){
    $('.next').click(function(){
        $.fn.fullpage.moveSectionDown();
    })
    var fullHeight = $(window).height();
    $('#fullpage').fullpage({
        navigation:true,  /*设置页面是否显示导航*/
        navigationPosition: 'right',  /*设置导航的位置 默认在左边显示*/
        afterLoad(anchorLink,index) {
            if(index == 2) {
                $('.next').fadeOut();
                $('.sec2_search').show().animate({'right': '380px'},1000,"easeOutBack",function(){
                    $('.sec2_words').animate({'opacity': 1},1000,function(){
                        $('.sec2_search').hide();
                        $('.sec2_full').show().animate({'height': 30,'left': 670,'bottom': 452},1000);
                        $('.sec2_goods').show().animate({"opacity":1},3000);
                        $('.sec2_words2_top').animate({'opacity': 1},1000);
                        $('.next').fadeIn();
                    });
                })
            }
            // if (index==7) {
            //     $('.sec7_box').animate({'width':120},300,function(){
            //         $('.sec7_words').show();
            //     })
            // }

        },
        // 当页面开始滚动的时候触发的函数
        onLeave(index,nextIndex,direction) {
            $('.next').fadeOut();
            if(index==2 && nextIndex==3) {
                $('.sec2_sofa').show().animate({'width':200,'bottom': -(fullHeight - 245),'right':750},2000,function(){
                    $('.sec2_cover').show();
                    $('.sec3_right1').animate({'opacity':1},2000);
                    $('.next').dadeIn();
                })
            }
            if(index==3 && nextIndex==4) {
                $('.sec2_sofa').hide();
                $('.sec3_sofa').show().animate({'bottom': -(fullHeight - 330), 'right': 386}, 1000, function () {
                    $('.sec4_cloud').animate({'right':500},6000);
                    $('.sec3_sofa').hide();
                    $('.sec4_sofa').show();
                        $('.sec4_carBox').animate({'right': -999}, 2000, 'easeInElastic', function () {
                            $('.sec4_card').animate({'opacity': 1}, 1000);
                            $('.sec4_cardWords').animate({'opacity': 1}, 1000);
                            $('.sec4_words2').show().animate({'opacity': 1}, 1000);
                            $('.next').fadeIn();
                        });
                    })
            }
            if(index==4 && nextIndex==5) {
                $('.sec5_hand').animate({'bottom':0},2000,function(){
                    $('.sec5_mouse1').show();
                    $('.sec5_sofa').show().animate({'bottom':-(fullHeight - 820)},3000,function(){
                        $('.sec5_order').animate({'bottom':400},1000,function(){
                            $('.sec5_words').addClass('sec5_words1');
                            $('.next').fadeIn();
                        })
                    })
                })
            }
            if(index==5 && nextIndex ==6) {
                $('.sec6_box').animate({'left':530},1000);
                $('.sec5_sofa').show().animate({'bottom': -(fullHeight - 500  ),'width':70,'left':560},1000,function(){
                    $('.sec5_sofa').hide();
                    $('.sec6_box').animate({'bottom':30},1000,function(){
                        $('.sec6_carWords').show();
                        $('.sec6_words').show().animate({'right':700},1000,'easeInOutCubic')
                        // 当盒子掉下来之后，让图六的背景色移动，用的属性是backgroundPosition
                        $('.section6').animate({'backgroundPositionX':'100%'},4000,function(){
                            $('.sec6_man').show().animate({'width':260,'bottom': 110},1000,function(){
                                $('.sec6_man').animate({'right': 550}, 1000, function () {
                                    $('.sec6_door').show();
                                    $('.sec6_women').show().animate({'bottom':110,'right':430,'width': 90},1000,function(){
                                        $('.sec6_manWords').show();
                                        $('.next').fadeIn();
                                    })
                                });
                            })
                        });

                    })

                });
            }
            if(index==6 && nextIndex==7) {
                setTimeout(function(){
                    $('.sec7_box').animate({'width':120},300,function(){
                        $('.sec7_words').show();
                    })
                },1000);
                $('.next').fadeIn();
            }
            // 这是第八屏动画
                // $('.sec8_btn').mouseenter(function(){
                //     $('.sec8_btn1').show();
                // });
                // $('.sec8_btn').mouseleave(function(){
                //     $('.sec8_btn1').hide();
                // })
                // $('.sec8_btn').hover(function(){
                //     $('.sec8_btn1').show();
                // },function(){
                //     $('.sec8_btn1').hide();
                // })
                $('.sec8_btn').hover(function () {
                    $('.sec8_btn1').toggle();
                });
                // 当鼠标移动的时候，手也跟着移动，但是移动的高度又上限
                $(document).mousemove(function (event) {
                    var x = event.pageX - $('.sec8_hand').width() / 2;
                    var y = event.pageY;
                    var minY = fullHeight - 450;
                    if (y < minY) {
                        y = minY;
                    }
                    $('.sec8_hand').css({'left': x, 'top': y});
                });
                // 当点击再来一次时 需要完成1.回到首部(利用fullpage插件的moveTo(1))；2. 回到最初始状态；要把之前设置的动画全部清空 也就是attr方法 把style属性清空
                $('.sec8_hand').click(function (event) {
                    $.fn.fullpage.moveTo(1);
                    $('img,.move').attr('style', '');
                });


        }

    });
})

注意：完成的过程中出现一个问题：一个元素制作成动画从商议隔屏幕往下一个屏幕掉，即使设置z-index 999也没有效果，原因如下：

z-index 在父元素是 position:relative 时设置是没有效果的！！而fulpage.js插件恰好各个section就是position: relative 所以在不改变父元素relative定位情况下应该给父元素设置z-Index！！！

posted @ 2019-03-01 16:11 写的BUG代码少阅读(364) 评论(0) 编辑收藏举报

刷新页面返回顶部

null

前端学习笔记 day20 使用fullpage插件完成购物网站（也可以做成广告）

公告