4

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

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

有任何想法吗？

7月4日快乐

编辑我正在尝试将 img url 保存在该 cookie 中，但它不起作用，它保存在 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>
4

3 回答 3

9

不知道为什么在“选择”离散的东西方面使用滑块。通常，滑块用于一些连续变化的值，例如选择 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 + "')");
    });
});
于 2009-07-05T01:49:28.560 回答
2

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

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

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

于 2010-01-28T00:56:17.180 回答
0 
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);
于 2011-04-07T06:15:32.030 回答