Question

是的，所以我的网站正在设计我正在使用插件Fullpage.js。我可以看到http://carrotcrunchpvp.comule.com/#horizontal/1上的动画。动画本身由percentagecircles.js文件完成，不使用CSS。这是动画。

这是percentagecircles.js文件中的内容

var dark = document.getElementsByClassName('dark');
var svg = document.getElementsByClassName('svg')[0];
var radius = svg.getBBox().width / 2;
var t = 0.5,
  x = 0,
  y = 0;
var theta = {
  0: 0,
  1: 0,
  2: 0
};
var anims = {}
var maxTheta = calcTheta(document.getElementsByClassName('perc'));
for (i = 0; i < dark.length; i++) {
  dark[i].setAttribute('transform', 'translate(' + radius + ',' + radius + ')');
}

function calcTheta(el) {
  var jbo = {};
  for (i = 0; i < el.length; i++) {
    jbo[i] = (180 * parseInt(el[i].innerHTML.slice(0, -1), 10)) / 50;
  }
  return jbo;
}
var animOne = setInterval(function() {
  theta[0] += 0.5;
  var x = Math.sin(theta[0] * Math.PI / 180) * radius;
  var y = Math.cos(theta[0] * Math.PI / 180) * -radius;
  var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta[0] > 180) ? 1 : 0) + ',1 ' + x + ',' + y + 'z';
  dark[0].setAttribute('d', d);
  if (theta[0] > maxTheta[0]) {
    clearInterval(animOne);
  }
}, t);
var animTwo = setInterval(function() {
  theta[1] += 0.5;
  var x = Math.sin(theta[1] * Math.PI / 180) * radius;
  var y = Math.cos(theta[1] * Math.PI / 180) * -radius;
  var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta[1] > 180) ? 1 : 0) + ',1 ' + x + ',' + y + 'z';
  dark[1].setAttribute('d', d);
  if (theta[1] > maxTheta[1]) {
    clearInterval(animTwo);
  }
}, t);
var animThree = setInterval(function() {
  theta[2] += 0.5;
  var x = Math.sin(theta[2] * Math.PI / 180) * radius;
  var y = Math.cos(theta[2] * Math.PI / 180) * -radius;
  var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta[2] > 180) ? 1 : 0) + ',1 ' + x + ',' + y + 'z';
  dark[2].setAttribute('d', d);
  if (theta[2] > maxTheta[2]) {
    clearInterval(animThree);
  }
}, t);

<div id="container">
    
  <svg class="svg" width="33%" height="33%" viewBox="0 0 141 141" shape-rendering="geometricPrecision">
    <path class="light" d="M70,70 v-70 a70,70 0 0,1 0,140 a70,70 0 1,1 0,-140" fill="#ffb467" />
	  <path class="dark" d="M70,70 v-70 a70,70 0 0,1 0,0" fill="#5ab8d4" stroke-colour="#5ab8d4" />
	  <path d="M20,70 a50,50 0 0,1 100,0 a50,50 0 0,1 -100,0" fill="white" />
	  <text class="perc" x="70" y="79" font-size="2em" text-anchor="middle">75%</text>
    </svg>
    
    
      <svg class="svg" width="33%" height="33%" viewBox="0 0 141 141" shape-rendering="geometricPrecision">
    <path class="light" d="M70,70 v-70 a70,70 0 0,1 0,140 a70,70 0 1,1 0,-140" fill="#ffb467" />
	  <path class="dark" d="M70,70 v-70 a70,70 0 0,1 0,0" fill="#5ab8d4" stroke-colour="#5ab8d4" />
	  <path d="M20,70 a50,50 0 0,1 100,0 a50,50 0 0,1 -100,0" fill="white" />
	  <text class="perc" x="70" y="79" font-size="2em" text-anchor="middle">9%</text>
  </svg>
    
    <svg class="svg" width="33%" height="33%" viewBox="0 0 141 141" shape-rendering="geometricPrecision">
    <path class="light" d="M70,70 v-70 a70,70 0 0,1 0,140 a70,70 0 1,1 0,-140" fill="#ffb467" />
	  <path class="dark" d="M70,70 v-70 a70,70 0 0,1 0,0" fill="#5ab8d4" stroke-colour="#5ab8d4" />
	  <path d="M20,70 a50,50 0 0,1 100,0 a50,50 0 0,1 -100,0" fill="white" />
	  <text class="perc" x="70" y="79" font-size="2em" text-anchor="middle">95%</text>
  </svg>
</div>

但是，如果你导航到我的网站 - carroutcrunchpvp.comule.com，你会看到它的横向滚动网站。这意味着所有的html都在index.html中。所以这意味着上面的脚本在index.html加载时运行。因此，您实际上看不到动画，因为它位于另一个“幻灯片”上。所以我需要找到一个解决方案，只有当我在'Our Ethos'页面上时才会运行动画...

现在，对于这个插件，一个'幻灯片'是一个横向卷轴，一个部分是一个垂直卷轴。供参考（代码不起作用）：

<div class="section">
    <div class="slide"> Slide 1 </div>
    <div class="slide"> Slide 2 </div>
    <div class="slide"> Slide 3 </div>
    <div class="slide"> Slide 4 </div>
</div>

此页面是一个水平滚动网站，包含4个横向视口。 1个部分，4个幻灯片= 1个垂直，4个水平... Tu comprends？

如前所述，我正在使用fullpage.js。为了解决我的问题，我查看了fullpage.js的文档（在这里找到：https://github.com/alvarotrigo/fullPage.js/），并意识到有内置函数可以做我需要的东西......太棒了！（https://github.com/alvarotrigo/fullPage.js#callbacks）。

在我的initialisation.js脚本中，用于初始化我需要/想要的所有fullpage插件设置，我在底部添加了相关代码来解决我的问题。

*注意 - 这是整个脚本的一部分，整个脚本可以在http://carrotcrunchpvp.comule.com/intialisation.js找到，是的我知道我拼错了初始化...

afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
        
        if(slideIndex == 1 ) {
            
            $.getScript("http://carrotcrunchpvp.comule.com/percentagecircles.js")
        }
            else {
                return false;
            }
        }

如果对此感到困惑，请转到https://github.com/alvarotrigo/fullPage.js#afterslideload-anchorlink-index-slideanchor-slideindex获取文档说明。

'Our Ethos'页面的幻灯片索引是1.因此，当我加载'Our Ethos'页面时，它会检索并运行位于该URL的脚本。现在我们已经完成了解释......我的问题

以上解决方案有效。如果我从主页转到Our Ethos页面，它的效果很好。然而，如果我然后转到另一个页面然后回到'Our Ethos'页面，它会重新运行这个脚本（正如预期的那样）并且格式化了......我无法在代码中显示它 - 你只需要去网站看看它自己（我想在这里做大部分时间 - 抱歉。）

我只需要一种方法让脚本在Our Ethos页面上只运行一次，但之后又单独留下，因为我不希望它再次运行。我不确定我会怎么做......

感谢任何想法，克里斯

Answer 1

我修复了它，基本上必须反转我的percentagecircles.js文件。而不是添加我需要在滑动休假时删除它们的属性，所以当它回到“我们的精神”时。滑动它只是重新做动画没有任何问题。

仅供参考：

＆＃13;

onSlideLeave: function(anchorLink, index, slideIndex, direction) {


  if (slideIndex == 1) {

    var dark = document.getElementsByClassName('dark');
    var svg = document.getElementsByClassName('svg')[0];
    var radius = svg.getBBox().width / 2;
    var t = 0.5,
      x = 0,
      y = 0;
    var theta = {
      0: 0,
      1: 0,
      2: 0
    };
    var anims = {}
    var maxTheta = calcTheta(document.getElementsByClassName('perc'));
    for (i = 0; i < dark.length; i++) {
      dark[i].setAttribute('transform', 'translate(' + radius + ',' + radius + ')');
    }

    function calcTheta(el) {
      var jbo = {};
      for (i = 0; i < el.length; i++) {
        jbo[i] = (180 * parseInt(el[i].innerHTML.slice(0, -1), 10)) / 50;
      }
      return jbo;
    }
    var animOne = setInterval(function() {
      theta[0] += 0.5;
      var x = Math.sin(theta[0] * Math.PI / 180) * radius;
      var y = Math.cos(theta[0] * Math.PI / 180) * -radius;
      var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta[0] > 180) ? 1 : 0) + ',1 ' + x + ',' + y + 'z';
      dark[0].removeAttribute('d', d);
      if (theta[0] > maxTheta[0]) {
        clearInterval(animOne);
      }
    }, t);
    var animTwo = setInterval(function() {
      theta[1] += 0.5;
      var x = Math.sin(theta[1] * Math.PI / 180) * radius;
      var y = Math.cos(theta[1] * Math.PI / 180) * -radius;
      var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta[1] > 180) ? 1 : 0) + ',1 ' + x + ',' + y + 'z';
      dark[1].removeAttribute('d', d);
      if (theta[1] > maxTheta[1]) {
        clearInterval(animTwo);
      }
    }, t);
    var animThree = setInterval(function() {
      theta[2] += 0.5;
      var x = Math.sin(theta[2] * Math.PI / 180) * radius;
      var y = Math.cos(theta[2] * Math.PI / 180) * -radius;
      var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta[2] > 180) ? 1 : 0) + ',1 ' + x + ',' + y + 'z';
      dark[2].removeAttribute('d', d);
      if (theta[2] > maxTheta[2]) {
        clearInterval(animThree);
      }
    }, t);


  }

},

＆＃13;

防止动画多次运行 - js回调

1 个答案: