Question

我已经将幻灯片箭头更改为我自己的png，黑色箭头，但在某些幻灯片上，背景较暗，我想将它们反转，因此它们是白色的。

-webkit-filter: invert(100%);

工作得很好，但是如何仅在使用回调的幻灯片上触发？

反转参数的快速动画0％＆gt; 100％将是一个很酷的奖金。感谢。

Answer 1

我不了解fullPage.js，但通过docs阅读，我发现您可以自定义在离开或进入幻灯片时触发的回调。

我认为这就是你想要的：

jsFiddle - https://jsfiddle.net/ym3snhu4/1/

请注意，我只使用-webkit-filter来反转颜色，因此这可能不适用于其他非webkit浏览器。例如，在Chrome中测试一下。否则，在添加/删除样式时，只需向filter属性添加更多前缀。这取决于你如何改变你的箭头，但你可以（例如fullPage.js）改变边框颜色而不是使用滤镜。

基本上，我们使用 afterSlideLoad 和 onSlideLeave 回调来实现此目的。这是注释中的解释代码。这很简单。我的评论比所需的代码更长，只是希望它清楚。

示例HTML：

<div class="section">
    <div class="slide" data-anchor="slide1"> Slide 1 - Index 0 </div>
    <div class="slide" data-anchor="slide2"> Slide 2 - Index 1 </div>
    <div class="slide slide-dark" data-anchor="slide3"> Slide 3 - Index 2 <br> I'm black </div>
    <div class="slide" data-anchor="slide4"> Slide 4 - Index 3</div>
</div>

<强> JavaScript的：

// Just take into consideration the callback methods.
// The body selector is the one I used in the jsFiddle, keep whatever you have.

$(document).ready(function() {
    $('body').fullpage({

        // The name is self explanatory. 
        // Fires when a a slide has finished loading
        // and returns info about the slide.
        // This is helpful so we can know when we are on the
        // darker slide(s)
        afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) { 

            // Notice that in the HTML I set the data-anchor attribute, 
            // since that can help us be specific about what slide we are in. 
            // Otherwise, just use the index, which is probably a good idea 
            // since onSlideLeave doesn't return the slideAnchor parameter, 
            // for some reason.
            // Change the if statement to whatever fits your needs.
            // Check what index and/or anchor your darker slides are.

            if(slideAnchor === 'slide3' || slideIndex === 2) {

                // This adds the invert filter to the controlArrow(s),
                // effectively reversing their color WHEN inside of
                // this specific slide.
                // (In this example, slideIndex 2 with anchor 'slide3').
                $('.fp-controlArrow').css('-webkit-filter', 'invert(100%)');
            }
        },

        // This fires when leaving a slide.
        // This will be helpful to return the arrows to their 
        // default color. (When we know we've inverted them beforehand)
        onSlideLeave: function (anchorLink, index, slideIndex, direction) {

            // We inverted the color of the arrows in slide 3.
            // When leaving this slide, we roll them back to their
            // original color, by setting the filter to 'none'.
            // I don't know why this 'event' doesn't return the
            // slideAnchor parameter, so we will just use the index
            // in here, which is slideIndex === 2 for 'slide3'.
            // Again, change the if logic to fit your needs, i.e. add
            // more slides.

            if(slideIndex === 2) {

                // This removes the filter, arrows go back to their
                // original color.

                $('.fp-controlArrow').css('-webkit-filter', 'none');

            }
        }
    });
});

在过滤器上平滑过渡所需的CSS （将动画速度更改为您想要的任何内容）：

.fp-controlArrow {
    -webkit-transition: all 500ms;
    transition: all 500ms;
}

在fullpage.js中反转图像回调的颜色

1 个答案: