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

Question

已关闭。此问题需要 debugging details 。目前不接受答案。

---

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem 。这将有助于其他人回答问题。

已关闭 8 年前。

Improve this question

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

link to sample

Answer 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 escape-in​​-out; 而左侧位置也缓慢变化!

希望对你有帮助!