背景图像更改时更改菜单颜色答案

【问题标题】：Change menu color when background image changes背景图像更改时更改菜单颜色
【发布时间】：2014-01-02 01:19:46
【问题描述】：

首页有一个背景幻灯片正在运行。问题是当背景较暗时菜单不可见，因为菜单本身具有深色字体颜色。当背景改变时，菜单颜色也应该改变。

我正在使用 Vegas Background jQuery 插件 (http://vegas.jaysalvat.com/)，我希望能够（手动）决定每张幻灯片的菜单颜色。

例如，如果背景为黑色，则菜单应为白色，而当背景变为浅色幻灯片时，菜单应为黑色。

此代码 sn-p 在幻灯片更改时触发：

$('body').bind('vegaswalk',
  function(e, bg, step) {
    alert( 'N°' +step+ ' is now displayed' );
  }
);

这是触发“vegaswalk”时我想做的事情：

slide 1 = black
slide 2 = white
if change to slide 1 => change menu to white
if change to slide 2 => change menu to black

Link to the site

编辑

在 php if 语句中组合脚本。脚本：

<script>
$.vegas('slideshow', { delay: 4000,
    backgrounds: [
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-vardagsrum.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-verkstad.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-urbild.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-kuggar.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-fiber.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-bord.jpg', fade: 1000 },
    ],
    walk: function(step) {
        //alert('N°' + step + ' is now displayed');

        // get a handle on the sidebar
        var $sidebar = $('div.sidebar');

        // change it's class according to the slide we are on
        switch (step) {
        case 0: goGray($sidebar); break;
    case 1: goWhite($sidebar); break;
        case 2: goGray($sidebar); break;
        case 3: goGray($sidebar); break;
        case 4: goGray($sidebar); break;
        case 5: goGray($sidebar); break;
        case 6: goWhite($sidebar); break;
        default: goWhite($sidebar); break;
        }
    }
})('overlay');

function goGray($sidebar){
    $sidebar.removeClass('white').addClass('gray');
}

function goWhite($sidebar){
    $sidebar.removeClass('gray').addClass('white');
}


</script>

每个案例都需要通过一个 php if 语句来检查它是否应该变灰。像这样的东西？这种情况下怎么结合php和jquery呢？

case 0: <?php if( go gray is chosen ) {
echo "goGray($sidebar);";
}
else{
    echo "goWhite($sidebar);";
} break;

【问题讨论】：

你试过了吗？
我已经尝试过在幻灯片更改时触发的代码 sn-p：$('body').bind('vegaswalk', function(e, bg, step) { alert( 'N°' +step+ ' is now displayed' ); } );
请在您的问题中输入代码。
你为什么不直接用 step 变量做一个 switch/case 语句呢？例如：switch(step) { case 1: $('#menuDiv').removeClass('lightMenu').addClass('darkMenu');休息;案例2：……；休息; } 等
@Felix：你成功了吗？

标签： javascript jquery plugins jquery-plugins

【解决方案1】：

你在尝试使用 walk 功能时是在正确的轨道上，试试这样：

$.vegas('slideshow', { delay: 4000,
    backgrounds: [
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-vardagsrum.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-verkstad.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-urbild.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-kuggar.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-fiber.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-bord.jpg', fade: 1000 },
    ],
    walk: function(step) {
        //alert('N°' + step + ' is now displayed');

        // get a handle on the sidebar
        var $sidebar = $('div.sidebar');

        // change it's class according to the slide we are on
        switch (step) {
            case 1:
            case 2:
                $sidebar.removeClass('white').addClass('gray');
            break;
            default:
                $sidebar.removeClass('gray').addClass('white');
            break;
        }
    }
})('overlay');

您需要相应地更改 switch case 语句（以及侧边栏和添加/删除类），但希望您能明白我要向您展示的内容的要点。

编辑

$.vegas('slideshow', { delay: 4000,
    backgrounds: [
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-vardagsrum.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-verkstad.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-urbild.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-kuggar.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-fiber.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-bord.jpg', fade: 1000 },
    ],
    walk: function(step) {
        //alert('N°' + step + ' is now displayed');

        // get a handle on the sidebar
        var $sidebar = $('div.sidebar');

        // change it's class according to the slide we are on
        switch (step) {
            case 1:
            case 2:
                goGray($sidebar);
            break;
            default:
                goWhite($sidebar);
            break;
        }
    }
})('overlay');

function goGray($sidebar){
    $sidebar.removeClass('white').addClass('gray');
}

function goWhite($sidebar){
    $sidebar.removeClass('gray').addClass('white');
}

【讨论】：

正如我在另一篇文章中评论的那样，是否可以像goGray(); 那样使用它们制作函数？我可以用 php 检查菜单是否应该是灰色的：<?php if( get_field('change_to_gray') ){echo " goGray(); ";} ?> 可以这样做吗？
我还没有测试过，但是看起来不错。最后一个问题：php if语句和gowhite/goblack函数如何结合？
如果 get_field 为真，我想回显 gogray，否则我想回显 gowhite。
我必须查看您的脚本才能了解如何帮助解决该问题。

【解决方案2】：

这成为了解决方案：

<script>
$.vegas('slideshow', { delay: 4000,
    backgrounds: [
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-vardagsrum.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-verkstad.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-urbild.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-kuggar.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-fiber.jpg', fade: 1000 },
        { src: 'http://ff.felipes.se/wp-content/uploads/2014/01/bakgrundsbild-bord.jpg', fade: 1000 },
    ],
    walk: function(step) {
        //alert('N°' + step + ' is now displayed');

        // get a handle on the sidebar
        var $sidebar = $('div.sidebar');

        // change it's class according to the slide we are on
        switch (step) {
        case 0: <?php if( get_field('bild1_gogray', $original_id) ){echo 'goGray($sidebar);' ;}else{echo 'goWhite($sidebar);' ;} ?> break;
    case 1: <?php if( get_field('bild2_gogray', $original_id) ){echo 'goGray($sidebar);' ;}else{echo 'goWhite($sidebar);' ;} ?> break;
        case 2: <?php if( get_field('bild3_gogray', $original_id) ){echo 'goGray($sidebar);' ;}else{echo 'goWhite($sidebar);' ;} ?> break;
        case 3: <?php if( get_field('bild4_gogray', $original_id) ){echo 'goGray($sidebar);' ;}else{echo 'goWhite($sidebar);' ;} ?> break;
        case 4: <?php if( get_field('bild5_gogray', $original_id) ){echo 'goGray($sidebar);' ;}else{echo 'goWhite($sidebar);' ;} ?> break;
        case 5: <?php if( get_field('bild6_gogray', $original_id) ){echo 'goGray($sidebar);' ;}else{echo 'goWhite($sidebar);' ;} ?> break;
        default: goWhite($sidebar); break;
        }
    }
})('overlay');

function goGray($sidebar){
    $sidebar.removeClass('white').addClass('gray');
}

function goWhite($sidebar){
    $sidebar.removeClass('gray').addClass('white');
}
</script>

【讨论】：