jQuery - 缩小画廊，通过 CSS 更改背景颜色？

Question

我有一个网站，我使用 php rotator 脚本文件随机化背景图像。但我在想，是否可以为每个背景图像创建一个小型预览库，并使其在用户将鼠标悬停在图像上时，网站的 css 背景图像会即时更改？而当用户点击他想要的图片时，图片就永久改变了？顺便说一句，图像 URL 可能需要保存在数据库记录中。

我该怎么做？首先，我需要正确创建画廊。也许我可以做一个“对于文件夹中的每个图像，显示为堆栈面板”？是否可以根据所述文件夹中的图像自动将图像发布到图库中？

关于我应该如何做到这一点的任何想法或想法？也许基于现有的画廊插件？

Answer 1

假设您的图像在一个具有“画廊”类的 div 中

​$(document).ready(function(){
    var originalBG = $('body').css('background');

    $('div.gallery img').hover(function(){
        // You could change this to include any other background options you need.
        $('body').css('background',"url('" + $(this).attr('src') + "')");
    },function(){
        $('body').css('background',originalBG);
    });

    $('div.gallery img').click(function(){
        originalBG = $('body').css('background');
        $.ajax({
            url: '/saveBG.php', // The url to your function to handle saving to the db
            data: originalBG,
            dataType:'Text',
            type: 'POST',  // Could also use GET if you prefer
            success: function(data) {
                // Just for testing purposes.
                alert('Background changed to: ' + data);
            }
        });
    });

});​