如何仅在选择单选按钮并按下提交按钮时动态更改背景图像[关闭]答案

【问题标题】：how to change background image dynamically only when radio button is selected and by pressing submit button [closed]如何仅在选择单选按钮并按下提交按钮时动态更改背景图像[关闭]
【发布时间】：2015-04-30 15:05:56
【问题描述】：

如何仅在选择单选按钮并按下提交按钮时动态更改背景图像

link to sample

【问题讨论】：

我认为你想要“平滑”和“缓慢”的背景变化，不是吗？检查我上次的编辑。

标签： javascript button submit radio

【解决方案1】：

仅使用 Javascript

在线测试：http://jsfiddle.net/OscarGarcia/t70prkda/

HTML 测试代码：

<form name="form" onsubmit="return check()">
    <p><input type="radio" name="bg" value="no" />
        Desactivate</p>
    <p><input type="radio" name="bg" checked="checked" value="yes" />
        Activate</p>
    <input type="submit" />
</form>

Javascript 代码：

function check() {
    if (document.form.bg.value == "yes") {
        document.body.style.background = "red";
    } else {
        document.body.style.background = "";
    }
    return false;
}

编辑 1：使用 jQuery

在线测试：http://jsfiddle.net/OscarGarcia/t70prkda/1/

function check() {
    if ($("#form input[name=bg]:checked").val() == "yes") {
        $('body').css('background', "red");
    } else {
        $('body').css('background', "");
    }
    return false;
}

编辑 3：在 JS 和 jQuery 中更改背景图像

为简单起见，我的代码仅更改背景颜色，此更改背景图像：http://jsfiddle.net/OscarGarcia/t70prkda/2/

function check() {
    if ($("#form input[name=bg]:checked").val() == "yes") {
        $('body').css('background-image', "url(https://c2.staticflickr.com/8/7151/6717697085_6d28849226_z.jpg)");
    } else {
        $('body').css('background', "");
    }
    return false;
}

在纯 JavaScript 中：http://jsfiddle.net/OscarGarcia/t70prkda/3/

function check() {
    if (document.form.bg.value == "yes") {
        document.body.style.backgroundImage = "url(https://c2.staticflickr.com/8/7151/6717697085_6d28849226_z.jpg)";
    } else {
        document.body.style.background = "";
    }
    return false;
}

编辑 3：平滑背景图像过渡

在线试用：http://jsfiddle.net/OscarGarcia/2g6rfdsf/

CSS 代码：

body {
    height: 100%;
}

#overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 0px;
    margin:0px;
    width: 100%;
    height: 100%;
    background: red url(http://thumbs.dreamstime.com/z/abstract-blue-tiled-background-5151518.jpg) -400px center;
    transition: all 2s ease-in-out;
    opacity: 0;
    z-index: -1;
}

HTML 代码：

<div id="overlay"></div>
<form name="form" id="form" onsubmit="return check()">
    <p><input type="radio" name="bg" value="no" />
        Fade-out</p>
    <p><input type="radio" name="bg" checked="checked" value="yes" />
        Fade-in</p>
    <input type="submit" />
</form>

请注意，我使用的是不透明度为 0（隐藏）的叠加层（背景上的 div），我将为不透明度设置动画。无法为背景图像更改设置动画，它们会立即更改。

以及javascript（jQuery版）代码：

function check() {
    if ($("#form input[name=bg]:checked").val() == "yes") {
        $('#overlay').
            css('opacity', '1').
            css('background-position', '0px center');
    } else {
        $('#overlay').
            css('opacity', '0').
            css('background-position', '-400px center');
    }
    return false;
}

当按下按钮时，背景覆盖将平滑显示或隐藏，因为 CSS 代码 transition: all 2s ease-in-out; 而左侧位置也变化缓慢！。

希望对你有帮助！

【讨论】：

【解决方案2】：

您将希望使用 jquery 来注册带有这两个操作的 eventHandler。

类似：

var backgroundHandler = function(){//whatever};
$('#radioWhatever').on('changed',backgroundHandler);
$('#submitbtn').on('click', backgroundHandler);

【讨论】：