Question

我想要包含20px x 20px潜在背景图片的迷你菜单。当用户点击其中一个时，身体背景图像将会改变，选择将保存为用户选择。

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

有什么想法吗？

7月4日快乐

EDIT 我正在尝试将img url保存在该cookie中，它不能正常工作，它在cookie中保存但不检索cookie内容

EDIT 以下作品，!!!!!!!但即使我添加，背景颜色也总是白色一个$("html").css("background-color","red");

FIX，在网址末尾添加了颜色

$("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>

Answer 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>

Magic 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 + "')");
    });
});

Answer 2

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

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

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

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

jquery滑块改变身体背景

3 个答案: