Question

我使用带有许多明暗图像的Revolution Slider。我的徽标图像显示在图像滑块的顶部。当滑块显示暗图像时，我喜欢我的徽标图像以显示浅色版本;当滑块显示浅色图像时，我希望我的徽标变暗。

以下是两个已实现此目标的网站示例，但我仍然不确定如何：

http://vankarwai.com/themes/lobo-agency/ http://pixelgrade.com/demos/pile/

您认为实现这一目标的最佳途径是什么？

谢谢！劳伦

Answer 1

您可以使用此插件：http://www.kennethcachia.com/background-check/index.html

代码示例：

BackgroundCheck.init({
  targets: '.check',
  images: '.images'
});

使徽标容器使用“check”类，并使滑块图像使用“images”类。该插件将使用“images”类检查图像的亮度，并将“background - light”或“background - dark”类附加到具有“check”类的元素。

您可以使用以下某些css更改徽标图片：

.check.background--light {
  background: url(logo-black.png); 
}

.check.background--dark {
  background: url(logo-white.png);
}

Answer 2

每个li标签中的

添加属性数据颜色（白色或黑色）

<li data-color="white" data-transition="fade" data-slotamount="5" data-masterspeed="700"   >

添加onchange事件

jQuery（document）.ready（function（）{

   revapi = jQuery('.tp-banner').revolution(
    {
        delay:9000,
        startwidth:1170,
        startheight:500,
        hideThumbs:10

    });


    revapi.bind("revolution.slide.onchange",function (e,data) {
        color=$(this).find('li').eq(data.slideIndex-1).data('color');

    if(color=='black') {// swap logo to black}
    if(color=='white') {// swap logo to white}

    });

根据哪个滑块图像处于活动状态来更改徽标的颜色

2 个答案: