为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/JavaScript

/FullPage.js全屏滚动插件

为什么我的第一屏打开时没有动画，从第二屏滚到第一屛时有动画？


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <title>fullpage</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="Jesse">
    <link href="jquery.fullPage.css" rel="stylesheet">
    <script src="jquery.min.js"></script>
    <script src="jquery.fullPage.min.js"></script>
   
</head>
<style type="text/css">
section { position: relative;}
.section1 .left { width: 100px; height: 40px; line-height: 40px; font-size: 35px; box-shadow:0px 0px 3px #FFF; position: absolute; top: 200px; left: 50px;}
.section1 .right {width: 100px; height: 40px; line-height: 40px; font-size: 35px; box-shadow:0px 0px 3px #FFF; position: absolute; top: 200px; right: 50px;}
.section2 .left { width: 100px; height: 40px; line-height: 40px; font-size: 35px; box-shadow:0px 0px 3px #FFF; position: absolute; top: 200px; left: 50px;}
.section2 .right {width: 100px; height: 40px; line-height: 40px; font-size: 35px; box-shadow:0px 0px 3px #FFF; position: absolute; top: 200px; right: 50px;}
</style>
<body>
 <script>
    $(function() {
        $('#fullpage').fullpage({
            
           anchors:['page1','page2','page3','page4','page5'],
            sectionsColor:['green','orange','gray','red','yellow'],
           navigation:true,
            afterLoad:function(link,index){
                switch(index){
                    case 0:
                    break;
                    case 1:
                    move('.section1 .left')
                    .x(300)
                    .end();
                    case 2:
                     move('.section2 .right')
                    .x(-300)
                    .end();
                    break;
                    case 3:
                    break;
                     case 4:
                    break;
                    default:
                    break;
                  
                }
            },
            onLeave:function(link,index){
                switch(index){
                    case 0:
                    break;
                    case 1:
                    move('.section1 .left')
                    .x(-300)
                    .end();
                    case 2:
                     move('.section2 .right')
                    .x(300)
                    .end();
                    break;
                    case 3:
                    break;
                     case 4:
                    break;
                    default:
                    break;
            }
        }
        })
    });
    </script>
    <div id="header" style="position:fixed;top:20px;right:20px;font-size: 30px;color:#fff;">123</div>
    <div id="fullpage">
        <div class="section section1">
            <div class="left">
                left
            </div>
            <div class="right">
                right
            </div>
        </div>
        <div class="section section2">
         <div class="left">
                left
            </div>
            <div class="right">
                right
            </div></div>
        <div class="section">
            <div class="slide"> Slide 1 </div>
            <div class="slide"> Slide 2 </div>
            <div class="slide active"> Slide 3 </div>
            <div class="slide"> Slide 4 </div>
        </div>
        <div class="section">section4</div>
        <div class="section">section5</div>
    </div>

    

  
   
     <script src="http://cdn.bootcss.com/move.js/0.4.0/move.js"></script>
</body>

</html>

老师你好，我想问一下。为什么我的第一屏打开时没有动画，从第二屏滚到第一屛时有动画？

凉生久梦

2016-11-08

源自：FullPage.js全屏滚动插件  3-2

关注问题 我要回答
2517
操作
收起

正在回答

2 回答

huaiai123 回答被采纳 +3 积分
2016-11-09

<!DOCTYPE html>

<html>

 

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="renderer" content="webkit">

    <title>fullpage</title>

    <meta name="description" content="">

    <meta name="keywords" content="">

    <meta name="author" content="Jesse">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.7/jquery.fullPage.css">

<script type="text/javascript" src="js/jquery-3.1.1.js" ></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.7/vendors/jquery.easings.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.7/jquery.fullPage.js"></script>

    

</head>

<style type="text/css">

section { position: relative;}

.section1 .left { width: 100px; height: 40px; line-height: 40px; font-size: 35px; box-shadow:0px 0px 3px #FFF; position: absolute; top: 200px; left: 50px;}

.section1 .right {width: 100px; height: 40px; line-height: 40px; font-size: 35px; box-shadow:0px 0px 3px #FFF; position: absolute; top: 200px; right: 50px;}

.section2 .left { width: 100px; height: 40px; line-height: 40px; font-size: 35px; box-shadow:0px 0px 3px #FFF; position: absolute; top: 200px; left: 50px;}

.section2 .right {width: 100px; height: 40px; line-height: 40px; font-size: 35px; box-shadow:0px 0px 3px #FFF; position: absolute; top: 200px; right: 50px;}

</style>

<body>

 <script>

    $(function() {

        $('#fullpage').fullpage({

             

           anchors:['page1','page2','page3','page4','page5'],

            sectionsColor:['green','orange','gray','red','yellow'],

           navigation:true,

            afterLoad:function(link,index){

                switch(index){

                    case 0:

                    break;

                    case 1:

                    move('.section1 .left')

                    .x(300)

                    .end();

                    case 2:

                     move('.section2 .right')

                    .x(-300)

                    .end();

                    break;

                    case 3:

                    break;

                     case 4:

                    break;

                    default:

                    break;

                   

                }

            },

            onLeave:function(link,index){

                switch(index){

                    case 0:

                    break;

                    case 1:

                    move('.section1 .left')

                    .x(-300)

                    .end();

                    case 2:

                     move('.section2 .right')

                    .x(300)

                    .end();

                    break;

                    case 3:

                    break;

                     case 4:

                    break;

                    default:

                    break;

            }

        }

        })

    });

    </script>

    <div id="header" style="position:fixed;top:20px;right:20px;font-size: 30px;color:#fff;">123</div>

    <div id="fullpage">

        <div class="section section1">

            <div class="left">

                left

            </div>

            <div class="right">

                right

            </div>

        </div>

        <div class="section section2">

         <div class="left">

                left

            </div>

            <div class="right">

                right

            </div></div>

        <div class="section">

            <div class="slide"> Slide 1 </div>

            <div class="slide"> Slide 2 </div>

            <div class="slide active"> Slide 3 </div>

            <div class="slide"> Slide 4 </div>

        </div>

        <div class="section">section4</div>

        <div class="section">section5</div>

    </div>

 

     

 

   

    

     <script src="http://cdn.bootcss.com/move.js/0.4.0/move.js"></script>

</body>

 

</html>

我把你的资源改了一下，没什么问题，第一屏的那个left往左飘也是可以的

0 回复 有任何疑惑可以回复我~
收起回答
#1

凉生久梦 提问者

非常感谢！我引入的源有问题。。。
2016-11-09 回复 有任何疑惑可以回复我~
#2

qq_沐沐_14

也遇到这个问题了 成功解决 很感谢！
2017-09-05 回复 有任何疑惑可以回复我~
#3

zhongjing 回复 qq_沐沐_14

怎么解决的，我现在也遇到了
2017-12-25 回复 有任何疑惑可以回复我~
猴犀利的7号
2018-01-07

倒是指出修改了哪里呀？afterLoad 我用这个回调，第一屏并不会触发呀，

0 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
FullPage.js全屏滚动插件
  • 参与学习       43827    人
  • 解答问题       202    个

基于jQuery的全屏滚动效果插件，让翻页显得格外的高端大气上档次

进入课程

为什么我的第一屏打开时没有动画，从第二屏滚到第一屛时有动画？

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信