我正在使用HTML 5 Blank Child Theme从WordPress加载一个前端站点。我有一个使用Particle Slider的标志效果,当屏幕大小>960px时,对于< 960px的屏幕尺寸,我有一个平面徽标图像。在Firefox和Google Chrome上都可以正常工作,但是在Safari上调整徽标大小时,必须手动刷新页面(即按cmd+r),才能再次显示PS效果。该代码源自我在这里发布的原始问题-Original Stack Q&A
以下是我现在使用的javascript代码-
particle-slider.php
我需要和这个网站这里看到的一样的效果——当页面被重新调整大小时,标志从粒子变为静态。粒子标志完美地重新出现。
所有其他相关代码都与原始问题链接在一起,因为没有任何改变。我没有看到控制台中有任何提示为什么它不起作用。
<?php /* Template Name: particle-slider */ ?>
<!-- particle-slider template -->
<div id="particle-slider">
<div class="slides">
<div class="slide" data-src="<?php echo home_url(); ?>/wp-content/uploads/2017/10/havoc_logohight.png"></div>
</div>
<canvas class="draw" style="width: 100%; height: 100%;"></canvas>
</div>
<script type="text/javascript">
var ps = new ParticleSlider({ 'width':'1400', 'height': '600' });
// patch nextFrame to track failure/success
var nextFrameCalled = false;
ps.oldNextFrame = ps.nextFrame;
ps.nextFrame = function () {
try {
ps.oldNextFrame.apply(this, arguments);
nextFrameCalled = true;
} catch (e) {
console.log(e);
nextFrameCalled = false;
}
};
var addEvent = function (object, type, callback) {
if (object.addEventListener) {
object.addEventListener(type, callback, false);
} else if (object.attachEvent) {
object.attachEvent("on" + type, callback);
} else {
object["on" + type] = callback;
}
};
var oldWidth = window.innerWidth;
addEvent(window, 'resize', function () {
var newWidth = window.innerWidth;
if (newWidth >= 960 && oldWidth < 960) {
console.log("Restarting particle slider " + newWidth);
ps.resize();
if (!nextFrameCalled)
ps.nextFrame(); // force restart animation
else {
// ensure that nextFrameCalled is not still true from previous cycle
nextFrameCalled = false;
setTimeout(function () {
if (!nextFrameCalled)
ps.nextFrame(); // force restart animation
}, 100);
}
}
oldWidth = newWidth;
});
</script>
<div id="logo"> <img src="<?php echo home_url(); ?>/wp-content/uploads/2017/10/havoc_logo.png"> </div>
<!-- particle-slider template -->
我需要和这个网站这里看到的一样的效果——当页面被重新调整大小时,标志从粒子变为静态。粒子标志完美地重新出现。
所有其他相关代码都与原始问题链接在一起,因为没有任何改变。我没有看到控制台中有任何提示为什么它不起作用。
ParticleSlider.resize()
,这反过来又调用了init
- 就像你在之前的问题中最初选择的答案一样,而不是你在这里复制的备选答案。 - KeithParticleSlider
是付费的,这意味着您应该从编写它的人那里获得一些专门的支持(如果您没有得到支持,则不要使用它)。这可能比尝试反向工程 teamgeek 的 Angular 实现更容易。 - Keith