jQuery jquery滑块改变身体背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1083308/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery slider to change body background
提问by vache
I want to include a mini menu 20px by 20px images of potential backgrounds. When a user clicks on one them the body background image will change and the selection saved as the users choice.
我想包含一个 20 像素 x 20 像素的潜在背景图像的迷你菜单。当用户点击其中一个时，身体背景图像将发生变化，并且选择保存为用户选择。
I've thought of using a slider but I don't know how I would be able to have the images in a liand be able to change the body css based on the selection.
我想过使用滑块，但我不知道如何将图像放入 ali并能够根据选择更改 body css。
Any ideas?
有任何想法吗？
Happy July 4th
7月4日快乐
EDIT i am trying to save the img url in that cookie, its not working tho, its saving in the cookie but its not retrieving the cookie content
编辑我试图将 img url 保存在那个 cookie 中，它不起作用，它保存在 cookie 中，但它没有检索 cookie 内容
EDIT
the below works, !!!!!!! but the background color is always white even if i add
a $("html").css("background-color","red");
编辑以下作品，!!!!!!!!! 但是即使我添加了背景颜色也总是白色 $("html").css("background-color","red");
FIX, added color at the end of the url
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>
回答by xandy
No idea why you use slider in terms of "choosing" something that is discrete. Generally a slider is for some continous changing values like selecting RGB value (which each channel starts from 0 - 255). For your mini-menu thing, which is very simple JQ + CSS:
不知道为什么在“选择”离散的东西方面使用滑块。通常，滑块用于一些连续变化的值，例如选择 RGB 值（每个通道从 0 - 255 开始）。对于您的迷你菜单，非常简单的 JQ + CSS：
HTML Markup for the menu
菜单的 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>
And the Magic JQ statements
和 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 + "')");
});
});
回答by chepe263
I had the same problem. I don't know if this can be useful but, what i did was
我有同样的问题。我不知道这是否有用，但是，我所做的是
var url= data.bgimg[0] ;
$('body').css('background-image',"url(" + url + ")");
where url is (obviously) the path to the img. I got it via json but you can change it.
其中 url 是（显然）img 的路径。我是通过 json 获得的，但您可以更改它。
回答by atheeq
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);
