javascript - 从下拉菜单设置背景图像 - javascript

Question

我想制作一个菜单来为有关我的作品的网站选择不同的背景。

这个（链接只适用于背景颜色，我能够很好地复制它 。http://www.javascripter.net/faq/backgrou.htm

我知道该属性是 bgImg 但我就是不知道如何实现它。如果有人可以制作一个简单的 jsfiddle 来向我展示这个看似简单的技巧，我将不胜感激。

谢谢！罗林

Answer 1

在这里，只需将更多选项添加到下拉菜单中，并使用图像 url 作为值来提供更多背景选项。

HTML：

<select id="backgrounds">
    <option>Select a background</option>
    <option value="http://t2.gstatic.com/images?q=tbn:ANd9GcT-wQk0CTwl93EmiaUaoIjpMVmwHDNBz_7hN0UNpAz5DCWq66Sp-w">Background 1</option>
    <option value="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg">Background 2</option>    
</select>

脚本：

$(document).ready(function()
{
    var body = $(document.body);
    $('#backgrounds').bind('change', function(event){
        var bg = $(this).val();
        if(bg == null || typeof bg === 'undefined' || $.trim(bg) === '')
            body.css('background-image', '');
        else
            body.css('background-image', "url('" + bg + "')");
    });
});

http://jsfiddle.net/Wg2AU/

要允许背景图像和背景颜色的组合，您可以使用以下代码：

HTML：

<select id="backgrounds">
    <option>Select a background</option>
    <option value="url('http://t2.gstatic.com/images?q=tbn:ANd9GcT-wQk0CTwl93EmiaUaoIjpMVmwHDNBz_7hN0UNpAz5DCWq66Sp-w')">Background Image 1</option>
    <option value="url('http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg')">Background Image 2</option>
    <option value="none #000">Black</option>
    <option value="none red">Red</option>
</select>

脚本：

$(document).ready(function()
{
    var body = $(document.body);
    $('#backgrounds').bind('change', function(event){
        var bg = $(this).val();
        if(bg == null || typeof bg === 'undefined' || $.trim(bg) === '')
            body.css('background', 'none transparent');
        else
            body.css('background', bg);
    });
});

http://jsfiddle.net/hKBtp/4/

Answer 2

jsFiddle Demo

使用背景图像选项，而不仅仅是颜色。

<form name="bgcolorForm">View my artwork:
    <select name="backArt" id="backArt">
        <option value="image1.gif">A Wedding Photo</option>
        <option value="image2.jpg">Beautiful Sunset</option>
        <option value="image3.gif">Canyon Lights</option>
        <option value="image4.gif">Morning Dew</option>
        <option value="image5.jpg">My Wife's Ugly Wart</option>
        <option value="image6.gif">My Beautiful Children</option>
    </select>
</form>

$(function () {
    $('#backArt').on('change', function () {
        var backImg = $('option:selected', this).val();
        $('body').css('background-image', 'url(' + backImg + ')');
    });
});