jquery滑块改变身体背景答案

【问题标题】：jquery slider to change body backgroundjquery滑块改变身体背景
【发布时间】：2012-01-16 09:44:32
【问题描述】：

我想包含一个 20 像素 x 20 像素的潜在背景图像的迷你菜单。当用户单击其中一个时，主体背景图像将更改，并且选择保存为用户选择。

我曾想过使用滑块，但我不知道如何才能将图像放在 li 中，并能够根据选择更改正文 css。

有什么想法吗？

7 月 4 日快乐

编辑我正在尝试将 img url 保存在该 cookie 中，但它不起作用，它保存在 cookie 中但它没有检索 cookie 内容

编辑下面的作品，!!!!!!!但即使我添加背景颜色总是白色 $("html").css("background-color","red");

修复，在网址末尾添加颜色

$("html").css("background", "url('" + imgCookieLink + "') no-repeat fixed center top #343837"); 


$(document).ready(function() {
$("#BGSelector a").click(function() {
    var imgLink = $("img", this).attr("src");
    $.cookie("html_img", "" + imgLink + "", { expires: 7 });
    var imgCookieLink = $.cookie("html_img");
    $("html").css("background", "url('" + imgCookieLink + "')");
});
});

<script type="text/javascript">
$(document).ready(function() { 
    $("#BGSelector a").click(function() {
       var imgLink = $("img", this).attr("src");
       $.cookie("html_img", "" + imgLink + "", { path: '/vitamovie', expires: 7 });
       var imgCookieLink = $.cookie("html_img");       
       $("html").css("background", "url('" + imgCookieLink + "') no-repeat fixed center    top"); 
    }); 
 });

</script>

<script type="text/javascript">
$(document).ready(function() {   
       var imgCookieLink = $.cookie("html_img");  
       $("html").css("background", "url('" + imgCookieLink + "') no-repeat fixed center top");

 });

</script>

【问题讨论】：

感谢 tvanfosson 的编辑：D
我不确定为什么背景颜色不会改变。但我强烈建议你试试 $("body").css("background-color", "#FF0000") 看看会发生什么。
$("body").css("background-color", "#FF0000");工作正常，
我还有一个问题，在本地这一切都有效，但在网络上它不起作用 cookie 正在改变但正文没有改变vitamovie.com
已修复，cookie路径错误:)

标签： jquery css cookies background

【解决方案1】：

不知道您为什么要使用滑块来“选择”离散的东西。通常，滑块用于一些连续变化的值，例如选择 RGB 值（每个通道从 0 到 255 开始）。对于您的迷你菜单，非常简单的 JQ + CSS：

菜单的 HTML 标记

<ul id="BGSelector">
    <li><a href="#ChangeBG"><img src="bgImageSource1"/></a></li>
    <li><a href="#ChangeBG"><img src="bgImageSource2"/></a></li>
    <li><a href="#ChangeBG"><img src="bgImageSource3"/></a></li>
</ul>

还有魔术 JQ 语句

// Init the bg change UI (which is within document ready)
$(function(){
    $("#BGSelector a").click(function() {
        var imgLink = $("img", this).attr("src");

        // change the body background css
        $("body").css("background", "url('" + imgLink + "')");
    });
});

【讨论】：

要保存用户偏好，请查看 JQuery.cookie 插件。您只需将 url 保存到 cookie 中并在每次文档加载时检索
谢谢，现在就试试，是的，当我说滑块时，我的意思是像 ul，li 滑块/画廊，
我正在保存它，但我检索不正确，请您帮忙
你确定你的检索值是错误的吗？我的意思是您可以尝试提醒（imgCookieLink）并查看其中的值是什么。看起来你所做的 $("html").css 应该不起作用，因为 html 文档不能有背景（甚至没有样式），只有“body”标签和中间的标签可以有。尝试 $("body").css 代替。
来自 w3、XHTML xsd 的官方回答。标签“html”的属性组不包含 css 的定义。而且在html上定义真的很合理，就是容器标签中包含了“head”和“body”。其中，head 仅用于“不可见”的东西，例如元数据和样式表链接以及 javascript。正文是用于显示目的的文档的实际“正文”。尽管“html”可以设置背景并且某些浏览器允许并显示，但这不是好的做法，它实际上违反了定义，html根本无法验证。

【解决方案2】：

我遇到了同样的问题。我不知道这是否有用，但是，我所做的是

var url= data.bgimg[0] ;
$('body').css('background-image',"url(" + url + ")");

其中 url （显然）是 img 的路径。我是通过 json 得到的，但你可以改变它。

【讨论】：

【解决方案3】：

var newBg = ['headercaption.gif', 'loading.gif', 'excelexport.gif', 'grid-layer.gif'];
var path="themes/default/images/";
var i = 0;
var rotateBg = setInterval(function(){
    $('body').css('backgroundImage' ,  "url('" +path+newBg[i]+ "')");
    if(i==4)
     i=0;
     else
      i++;
}, 5000);

【讨论】：