Question

我运行一个免费的资源网站，提供可图块/无缝模式，我正在尝试在我的帖子中添加一个按钮（带有脚本），访问者可以点击这些按钮来更改页面的背景图像，以便他们可以预览模式在行动。因此，例如在这篇文章（http://tileablepatterns.com/denim-pattern/）上，我希望用户能够点击按钮/链接，这会将背景图像从灰色背景更改为牛仔图案。

我该怎么做呢？此外，我希望它是一个简单的脚本，我可以插入帖子而不必编辑主题文件。

非常感谢您的帮助！

Answer 1

为您的按钮指定一个ID，例如：id =“button”，然后以下内容应该有效：

$('#button').click(function(){ $('body').css('background', 'url(http://tileablepatterns.com/wp-content/uploads/2014/09/Denim.jpg) repeat 0 0'); });

Answer 2

所以基本上我试过这个<button onclick="document.body.style.background = 'url(http://tileablepatterns.com/wp-content/uploads/2014/09/Denim.jpg) no-repeat center center'">change bg</button>

它为现有背景添加了两条白线，一条靠近顶部，另一条靠近底部，但它没有改变整个背景。我认为有背景或其他东西的包装，但我不知道如何更改代码以便它改变整个页面的背景，包括包装器？

Answer 3

如果我是使用jQuery执行此操作，我会采用模块化方法，并且可以在HTML中轻松模板化，并且在Javascript失败时仍可正常工作。

从一些基本标记开始（我使用Baconmockup作为样本图像）：

<div id="page" class="container">
    <!-- Note that we're defining both href as well as two html5 attributes called data-src and data-background-change (data-background-change is what indicates that this particular link has some special functionality and data-src is the the source for the script below) -->
    <a href="https://s3.amazonaws.com/baconmockup/img/baconmockup-470-300.jpg" data-src="https://s3.amazonaws.com/baconmockup/img/baconmockup-470-300.jpg" data-background-change>Click me</a>
</div>

还有一点CSS：

// The container is your page, and the background we'll change in this example.
div.container {
    background: red;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

最后在main.js：

$(function () {

    $.fn.changeBackgroundOnClick = function () {

        var target = this[0];
        var image = target.getAttribute('data-src');

        $(target).on('click', function(e) {

            // If JS is enabled, the click will prevent the browser from navigating to the image.
            e.preventDefault();

            $('#page').css({
                'background-image' : 'url(' + image + ')',
                'background-size' : 'cover',
                'background-repeat' : 'no-repeat'
            });
        });

        return this;
    }

    // We can now iterate over every element with data-background-change to give it the functionality you need. No code needs to be repeated. :)
    $('a[data-background-change]').each(function () {
        $(this).changeBackgroundOnClick(); 
    });

});

祝你好运。

看看这个小提琴：http://jsfiddle.net/Nyyby/31/

单击预览按钮会更改页面的背景？

3 个答案: