Question

我是新手，并且是第一次使用fullpage.js。我希望你能帮助我。

因此，我的目标是每次进入新区域时将徽标旋转60度。我有五个部分。

我一直在尝试一些东西，但这不是我想要的。现在我用这个。但这仅适用于section0，section1并在section3重置。

为什么不起作用？

$(document).ready(function(){
    $('#fullpage').fullpage({

        //options
        sectionsColor: ['#2f323a', '#2b32fa', '#2ff23a', '#2f003a', '#2f322b'],
        easingcss: 'cubic-bezier(.31,.87,.89,.48)',
        loopTop: true,
        loopBottom: true,
        navigation: true,
        navigationPosition: 'right',

        afterLoad: function(anchor, index) {
            $('#logo').toggleClass('rotate1');
        },
        onLeave: function(index, nextIndex, direction) {
            $('#logo').toggleClass('rotate2');
        }

    });


});

#logo {
    position: fixed;
    width:80px;
    height:80px;
    top: 20px;
    left: 20px;
    z-index: 100;
}
#logo.rotate1 {
    transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
}
#logo.rotate2 {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Website</title>

  <link rel="stylesheet" href="assets/css/fullpage.min.css" type="text/css">
  <link rel="stylesheet" href="assets/css/main.css" type="text/css">

  <script type="text/javascript">
  </script>
  
  </head>
  <body>

<img id="logo" src="assets/img/logo.svg">

    <div id="fullpage">
        <div class="section"><h3>Section</h3>1</div>
        <div class="section"><h3>Section</h3>2</div>
        <div class="section"><h3>Section</h3>3</div>
        <div class="section"><h3>Section</h3>4</div>
        <div class="section"><h3>Section</h3>5</div>
    </div>

    
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

  <script src="assets/js/fullpage.min.js" type="text/javascript"></script>
  <script src="assets/js/function.js" type="text/javascript"></script>

  </body>
</html>

Answer 1

使用jquery data()和css()方法

$(document).ready(function() {
  $('#fullpage').fullpage({
    sectionsColor: ['#2f323a', '#2b32fa', '#2ff23a', '#2f003a', '#2f322b'],
    easingcss: 'cubic-bezier(.31,.87,.89,.48)',
    loopTop: true,
    loopBottom: true,
    navigation: true,
    navigationPosition: 'right',

    afterLoad: function(anchor, index) {
      let angle = +$('#logo').data('angle') + 60;
      $('#logo')
        .css({'transform': `rotate(${angle}deg)`})
        .data('angle', angle);
    }
  });
});

#logo {
  position: fixed;
  width: 80px;
  height: 80px;
  top: 20px;
  left: 20px;
  z-index: 100;
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

.as-console {
  display: none!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.5/fullpage.min.css" />
<img id="logo" src="https://via.placeholder.com/80" data-angle="-60">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.5/fullpage.min.js"></script>

<div id="fullpage">
  <div class="section">
    <h3>Section</h3>1</div>
  <div class="section">
    <h3>Section</h3>2</div>
  <div class="section">
    <h3>Section</h3>3</div>
  <div class="section">
    <h3>Section</h3>4</div>
  <div class="section">
    <h3>Section</h3>5</div>
</div>

进入新部分后旋转徽标

1 个答案: