1

需要一些帮助。我为页面制作了一个背景选择器,所以基本上有 4 种不同的背景图像可供用户选择。

这是我用于此的代码和脚本:

HTML:

<ul>
  <li id="color-1"></li>
  <li id="color-2"></li>
  <li id="color-3"></li>
  <li id="color-4"></li>
</ul>

脚本:

<script>
    $('ul li').click(function() {
    var background = $(this).css('background-image');
    $("html, body").css("background-image", background);
});
</script>

问题是当我切换页面时,背景图像会重置为默认图像。我知道这可以通过设置 cookie 来解决。我尝试了几种方法,但都没有奏效。

有人可以帮我解决这个问题。谢谢你的好处。

4

3 回答 3

1

选中后,将背景存储在 localStorage

<script>
    $('ul li').click(function() {
    var background = $(this).css('background-image');
    $("html, body").css("background-image", background);
    localStorage.background = background;
});
</script>

加载页面时,应用它。

$("html, body").css("background-image", localStorage.background);
于 2013-11-01T20:35:57.350 回答
0

将背景变量保存在 cookie 中:

document.cookie = "bgimage=" + background;

然后获取cookie:

$(function(){
   var bgCookie = getCookie("bgimage");
   $("html, body").css("background-image", bgCookie);
});

function getCookie(name) {
  var parts = document.cookie.split(name + "=");
  if (parts.length == 2) return parts.pop().split(";").shift();
}

getCookie()方法取自:按名称获取 cookie

于 2013-11-01T20:34:19.110 回答
0

您可以将 custom-background.js 插件添加到您的网站

https://github.com/CybrSys/custom-background.js

于 2014-10-27T07:45:54.173 回答