防止动画多次运行 - js 回调
Prevent animation running more than once - js callbacks
对，所以我目前正在设计我的网站，我正在使用插件Fullpage.js。如您所见，我有一个关于 http://carrotcrunchpvp.comule.com/#horizontal/1 的动画。动画本身由 percentcircles.js 文件完成，不使用 CSS。这是动画。
这是百分比圆圈.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都在索引.html中。因此，这意味着上述脚本在 index.html 加载时运行。因此，您实际上看不到动画发生，因为它在另一张"幻灯片"上。所以我需要找到一个解决方案，只在我进入"我们的精神"页面时才运行动画......
现在顺便说一句，对于这个插件 - "幻灯片"是横向滚动条，部分是垂直滚动条。供参考（代码不起作用）：
<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 个水平...涂呦？
如前所述，我使用的是整页.js。为了解决我的问题，我浏览了整页的文档.js（在这里找到：https://github.com/alvarotrigo/fullPage.js/），并意识到有内置的函数来完成我需要的......伟大！（https://github.com/alvarotrigo/fullPage.js#callbacks）。
在我的初始化.js脚本中，用于从字面上初始化我需要/想要的所有整页插件设置，我在底部添加了相关代码来解决我的问题。
*注意 - 这是整个脚本的一部分，整个脚本可以在 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 以获取文档说明。
"我们的精神"页面的幻灯片索引为 1。因此，当我加载"我们的精神"页面时，它会检索并运行位于该 url 的脚本。现在我们完成了解释...我的问题
上面的解决方案有效，有点。如果我从主页转到我们的精神页面，效果很好。但是，如果我随后转到另一个页面并返回"我们的精神"页面，它会重新运行此脚本（如预期的那样），并且格式搞砸了......我无法在代码中显示它 - 您只需要访问网站并亲自查看它（我正在尝试在此处制作大部分内容 - 对不起。
我只需要一种方法，让脚本在 Our Ethos 页面上只运行一次，但后来就不管了，因为我不希望它第二次运行。我不确定我会怎么做...
任何想法都值得赞赏，克里斯
我修复了它，基本上不得不与我的百分比圆圈.js文件相反。我没有添加属性，而是需要在幻灯片离开时删除它们，所以当它回到"我们的精神"幻灯片时，它只是重新制作动画而没有任何问题。
仅供参考：
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);
}
},相关文章：
- 要求未定义JS回调参数
- 从新的WordPress媒体上传程序获取JS回调
- 重构DRY代码的Node.JS回调
- Material Design Lite所有元素加载JS回调
- js回调到基于生成器的代码
- Flux+React.js-回调操作是好是坏
- 节点.js回调函数不返回值
- 理解node.js回调
- node.js回调函数generanddb
- JSON和JS回调函数
- 从嵌套在函数中的Node.js回调返回对象
- 循环中的Node.js回调具有错误的迭代器值
- 将变量传递给 Node.JS 回调函数
- 防止动画多次运行 - js 回调
- 引导框.js回调不起作用
- 使用 map(） 和一个具有一个附加参数的函数的 JS 回调
- 异步等待.js回调中的多个参数
- 定义节点.js回调的超时
- 节点.js回调如何异步
- 节点.js回调工作不正常
