Question

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

我该怎么做？首先，我需要正确创建图库。也许我可以“为文件夹中的每个图像，显示为堆栈面板”？使其基于所述文件夹中的图像，图像自动发布在图库中？

关于我应该怎么做的任何想法或想法？它可能基于现有的库插件吗？

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);
            }
        });
    });

});

jQuery - 缩小图库，通过CSS更改背景颜色？

1 个答案: