在网站的选择框中选择背景

时间:2014-04-17 21:13:08

标签: javascript php jquery html

我对javascript和php不是很了解,而且我明白要做这项工作我需要使用js和php。

我想创建一个"选择框"有4个不同的图像。 将有一个默认图像,但在此选择框中,用户应该能够根据需要选择其他3个背景中的一个。

我不确定为什么它不起作用,所以我会在下面向您展示我的文件:

这是webclient.html:

<div class="dropdown" id="dropdown">
                <input type="checkbox" id="drop1" />
        <label for="drop1" class="dropdown_button">Background <span class="arrow"></span></label>
        <ul class="dropdown_content">
            <li><a href="#" onclick="changeImage(1);">Navy Aero</a></li>
            <li><a href="#" onclick="changeImage(2);"><img src="img/b_webclient_2.png" /></a></li>
            <li><a href="#" onclick="changeImage(3);">Gray Bullet</li>                                
            <li><a href="#" onclick="changeImage(4);">Dark Pheonix</li>
        </ul>
        <!-- note that the <img src> was just to test if it would work if I placed image in. -->
    </div>

我还包括脚本:

<script type="text/javascript" src="core/jquery.js"></script>
<script type="text/javascript" src="core/changebg.js"></script>

changebg.js:

function changeImage(number)
{
    $.post('core/changebg.php',{number:number},
        function(data)
        {
            $('body').css('background-image', 'url("img/'+number+'.png")');
        });
}

changebg.php:

<?php

    if (isset($_POST['number'])) 
    {
        session_start();
        $_SESSION['image'] = $_POST['number'];
    }

?>

最终产品是这样的: http://imgur.com/HXzpGhj

当我点击其中任何一个时,没有任何事情发生。

1 个答案:

答案 0 :(得分:0)

您可以使用纯粹的jQuery,例如以下内容,只需将backgroundColor替换为backgroundImage,将选择的值替换为图像的路径,或者图像的数量和使用像'img/'+bg+'.png'

这样的id路径中的bg变量
$('#bgs').on('change', function() {
    var bg = $(this).find(':selected').val(),
        body = $('body');
    body.css('backgroundColor', bg);
});

JSFiddle Color Example

JSFiddle Image Example

JSFiddle Effect Transition Example