如何动态地更改背景图片，只有当单选按钮被选中并通过pressing提交按钮 [英] how to change background image dynamically only when radio button is selected and by pressing submit button

问题描述

如何更改动态，只有当单选按钮被选中的背景图像，并通过pressing提交按钮

how to change background image dynamically only when radio button is selected and by pressing submit button

链接来样

推荐答案

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

HTML测试code：

HTML test code:

<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 code：

Javascript code:

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更改背景图片

为了简单起见我的code只改变背景颜色，这样的一个改变背景图片：的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 code：

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 code：

HTML Code:

<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>

请注意，我使用的覆盖（在背景的div）不透明度为0（隐藏），我会动画的不透明度。这是不可能的动画背景图像的变化，他们会立即改变。

Note that I'm using an overlay (a div over the background) with opacity 0 (hidden) and I'll animate the opacity. It's not possible to animate background image changes, they will change instantly.

和JavaScript（jQuery的版本）code：

And javascript (jQuery version) code:

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 code 过渡：所有2S缓解-IN-OUT; ，而左边的位置变化缓慢呢！

When pushing button background overlay will show or hidden smoothly because CSS code transition: all 2s ease-in-out; while left position changes slowly too!.

希望它帮助！

这篇关于如何动态地更改背景图片，只有当单选按钮被选中并通过pressing提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！