将 SVG 作为时间轴

Question

我正在尝试使用 SVG 制作循环时间轴。我正在使用整页 js 所以我制作了一条蓝线，在围绕圆圈滚动时逐渐工作，但现在我希望我的锚点破折号阵列也出现，但我找不到解决方案，我希望我的锚点出现并在我向下滚动时停留（就像时间轴）来向上滚动时返回灰色

$(document).ready(function() {
   $('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', 'lastPage'],
    menu: '#menu',
    scrollingSpeed: 1000,  
                onLeave: function(index, nextIndex, direction){
                  $('#bluecircle').css('stroke-dashoffset', (1510/4)*(4-(nextIndex-1))); 
       }
 
       });
    });

#timeline{
 position:fixed;
 width:500px;
 height:500px;
 top:50%;
 left:50%;
 margin-top:-250px;
 margin-left:-250px;
 pointer-events: all;
 z-index:99;
}


#greycircle, #smallgreytop, #smallgreyleft, #smallgreybottom, #smallgreyright{
 stroke:rgba(204,204,204,1);
}
#bluecircle{
 stroke-dasharray:1510;
 stroke-dashoffset:1510;
 -webkit-transition:all 1s ease;
 transition:all 1s ease;
}

#smallblueleft, #smallbluebottom, #smallblueright{
   stroke-dasharray:40;
 stroke-dashoffset:40;
  -webkit-transition:all 1s ease;
 transition:all 1s ease;
}

#smallblueleft:hover, #smallbluebottom:hover, #smallblueright:hover{
 stroke-dashoffset:0;
}
 /********** section ************/
 

.fp-section {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
 text-align:center;
}

.fp-section.fp-table, .fp-slide.fp-table {
    display: table;
    table-layout:fixed;
    width: 100%;
}
.fp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

.fp-scrollable {
    overflow: scroll;
}
.fp-notransition {
    -webkit-transition: none !important;
    transition: none !important;
}

h2{
 font-size: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>


 <div id="timeline">
 
   <svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500">
<circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/>

<circle id="smallgreytop" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/>

<circle id="smallgreyleft" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/>

<circle id="smallgreybottom" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/>

<circle id="smallgreyright" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/>

<circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024" transform="rotate(-90 249.85 248.065)"/>

<a data-offset="0" xlink:href="#firstPage"><circle id="smallbluetop" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/></a>

<a data-offset="1132.5" xlink:href="#secondPage"><circle id="smallblueright" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/></a>

<a data-offset="755" xlink:href="#3rdPage"><circle id="smallbluebottom" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/></a>

<a data-offset="377.5" xlink:href="#4thPage"><circle id="smallblueleft" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/></a>
      </svg>

 </div>
  
  <div id="fullpage">
 <div class="section " id="accueil">
        <h2>first</h2>
   
 </div>
 <div class="section" id="don">
   <h2>second</h2>

 </div>
 <div class="section" id="tri">
   <h2>3rd</h2>
 
 </div>
 <div class="section" id="recycle">
   <h2>4th</h2>
   </div>
            
            <div class="section" id="vente">
   <h2>last</h2>
 
   </div>
</div>

我的代码：

Answer 1

只需添加一个包含您的每个圈子 ID 的数组，并在查找事件返回的 object 后在 onleave 事件中更改它们的 css ：

var smallCircles= ['top','right','bottom','left','top'];
...
onLeave: function(...

    if(direction=='up'){
         $('#smallblue'+smallCircles[nextIndex]).css('stroke-dashoffset', '40');
         }
    $('#smallblue'+smallCircles[nextIndex-1]).css('stroke-dashoffset', '0');

var smallCircles= ['top','right','bottom','left','top'];
$(document).ready(function() {
   $('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', 'lastPage'],
    menu: '#menu',
    scrollingSpeed: 1000,  
                onLeave: function(index, nextIndex, direction){
                  $('#bluecircle').css('stroke-dashoffset', (1510/4)*(4-(nextIndex-1))); 
                  if(direction=='up'){$('#smallblue'+smallCircles[nextIndex]).css('stroke-dashoffset', '40');}
                  $('#smallblue'+smallCircles[nextIndex-1]).css('stroke-dashoffset', '0');
       }
 
       });
    });

#timeline{
 position:fixed;
 width:500px;
 height:500px;
 top:50%;
 left:50%;
 margin-top:-250px;
 margin-left:-250px;
 pointer-events: all;
 z-index:99;
}


#greycircle, #smallgreytop, #smallgreyleft, #smallgreybottom, #smallgreyright{
 stroke:rgba(204,204,204,1);
}
#bluecircle{
 stroke-dasharray:1510;
 stroke-dashoffset:1510;
 -webkit-transition:all 1s ease;
 transition:all 1s ease;
}

#smallblueleft, #smallbluebottom, #smallblueright, #smallbluetop{
   stroke-dasharray:40;
 stroke-dashoffset:40;
  -webkit-transition:all 1s ease;
 transition:all 1s ease;
}

#smallblueleft:hover, #smallbluebottom:hover, smallbluetop:hover, #smallblueright:hover{
 stroke-dashoffset:0;
}
 /********** section ************/
 

.fp-section {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
 text-align:center;
}

.fp-section.fp-table, .fp-slide.fp-table {
    display: table;
    table-layout:fixed;
    width: 100%;
}
.fp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

.fp-scrollable {
    overflow: scroll;
}
.fp-notransition {
    -webkit-transition: none !important;
    transition: none !important;
}

h2{
 font-size: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>


 <div id="timeline">
 
   <svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500">
<circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/>

<circle id="smallgreytop" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/>

<circle id="smallgreyleft" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/>

<circle id="smallgreybottom" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/>

<circle id="smallgreyright" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/>

<circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024" transform="rotate(-90 249.85 248.065)"/>

<a data-offset="0" xlink:href="#firstPage"><circle id="smallbluetop" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/></a>

<a data-offset="1132.5" xlink:href="#secondPage"><circle id="smallblueright" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/></a>

<a data-offset="755" xlink:href="#3rdPage"><circle id="smallbluebottom" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/></a>

<a data-offset="377.5" xlink:href="#4thPage"><circle id="smallblueleft" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/></a>
      </svg>

 </div>
  
  <div id="fullpage">
 <div class="section " id="accueil">
        <h2>first</h2>
   
 </div>
 <div class="section" id="don">
   <h2>second</h2>

 </div>
 <div class="section" id="tri">
   <h2>3rd</h2>
 
 </div>
 <div class="section" id="recycle">
   <h2>4th</h2>
   </div>
            
            <div class="section" id="vente">
   <h2>last</h2>
 
   </div>
</div>

将 SVG 作为时间轴

make SVG as a timeline

javascript

jquery

svg

timeline

fullpage.js