jquery滑块改变身体背景

Question

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

我曾想过使用滑块,但我不知道如何将图像放入a li并能够根据选择更改body css.

有任何想法吗？

7月4日快乐

编辑我试图保存该cookie中的img url,它不工作,它在cookie中保存但它没有检索cookie内容

编辑以下作品,!!!!!!! 但即使我添加一个,背景颜色也总是白色 $("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>

和魔术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 + "')");
    });
});