jquery滑塊來改變身體背景

我想包括一個迷你菜單20px乘20px圖像的潛在背景。當用戶點擊其中一個人時，身體背景圖像將會更改，並且選擇將保存爲用戶選擇的內容。jquery滑塊來改變身體背景

我想過使用滑塊，但我不知道如何能夠在li中獲得圖像，並且能夠根據選擇更改主體css。

任何想法？

快樂7月4日

編輯我試圖保存在cookie中的圖像網址，它不工作壽，其節省的Cookie，但它不是檢索cookie的內容

編輯以下作品，!!!!!!!但背景顏色始終是白色的，即使我添加一個$("html").css("background-color","red");

FIX，在URL的末尾添加顏色

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

來源

2009-07-05 vache

感謝tvanfosson的編輯：D – vache 2009-07-05 01:45:25

我不知道爲什麼背景顏色不會改變。但我強烈建議你嘗試$（「body」）.css（「background-color」，「＃FF0000」），看看會發生什麼。 – xandy 2009-07-05 14:51:18

$（「body」）.css（「background-color」，「＃FF0000」）; 工作正常， – vache 2009-07-05 15:06:32

不知道爲什麼你的「選擇」一些條款使用滑塊是離散。一般來說，滑塊用於連續更改值，如選擇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-05 01:49:28 xandy

我有同樣的問題。我不知道這是否有用，但是，我做的是

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

其中url（顯然）是img的路徑。我通過json獲得了它，但是你可以改變它。

來源

2010-01-28 00:56:17 chepe263

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-07 06:15:32 atheeq

jquery滑塊來改變身體背景

回答

相關問題