使用jquery.cookie.js保留背景图像
现在我有了一个背景图像滑块,用户可以点击一个按钮,然后在浏览网站时从七个图像中选择一个作为背景,问题当然是当他们点击扔到另一个页面时,它会恢复为默认图像。有没有办法让jquery.cookie.js解决这个问题?以下是我的尝试 工作的jQuery部分:使用jquery.cookie.js保留背景图像,jquery,cookies,slider,Jquery,Cookies,Slider,现在我有了一个背景图像滑块,用户可以点击一个按钮,然后在浏览网站时从七个图像中选择一个作为背景,问题当然是当他们点击扔到另一个页面时,它会恢复为默认图像。有没有办法让jquery.cookie.js解决这个问题?以下是我的尝试 工作的jQuery部分: $(function(){ $('.btn a').parents('.btn').click(function(){ var img = $(thi
$(function(){
$('.btn a').parents('.btn').click(function(){
var img = $(this).attr('data-bg-img'),
afterFadeIn = function() {
$('body').css('background-image', 'url(' + img + ')');
$('bg-style').css('opacity', 0);
};
$('#bg-style')
.css({'background-image': 'url(' + img + ')', 'opacity': 0})
.animate({ 'opacity' : 1 }, 500, afterFadeIn);
});
});
jQuery部分没有:
$(函数(){
HTML:
<div id="slideshow" class="bgSlider">
<div class="btn btn1" data-bg-img ="<?php bloginfo('stylesheet_directory'); ?>/images/k2-in-skies.jpg"><a href="#">Button 1</a></div>
<div class="btn btn2" data-bg-img ="<?php bloginfo('stylesheet_directory'); ?>/images/k2.jpg" class="bgimage"><a href="#">Button 2</a></div>
<div class="btn btn3" data-bg-img ="<?php bloginfo('stylesheet_directory'); ?>/images/kunhar-river.jpg"><a href="#">Button 3</a></div>
<div class="btn btn4" data-bg-img ="<?php bloginfo('stylesheet_directory'); ?>/images/mitre-peak-baltoro.jpg"><a href="#">Button 4</a></div>
<div class="btn btn5" data-bg-img ="<?php bloginfo('stylesheet_directory'); ?>/images/musa-ka-musalla.jpg"><a href="#">Button 5</a></div>
<div class="btn btn6" data-bg-img ="<?php bloginfo('stylesheet_directory'); ?>/images/nanga-parbat.jpg"><a href="#">Button 6</a></div>
<div class="btn btn7" data-bg-img ="<?php bloginfo('stylesheet_directory'); ?>/images/naran-valley.jpg"><a href="#">Button 7</a></div>
<div class="clearfix"></div>
</div>
非常感谢!这很方便,我在cookie代码的第一行输入了一个断点,然后我又得到了这个
function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && (!/Object/.test(Object.prototype.toString.call(value)) || value === null || value === undefined)) {
options = $.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var decode = options.raw ? function(s) { return s; } : decodeURIComponent;
var pairs = document.cookie.split('; ');
for (var i = 0, pair; pair = pairs[i] && pairs[i].split('='); i++) {
if (decode(pair[0]) === key) return decode(pair[1] || ''); // IE saves cookies with empty string as "c; ", e.g. without "=" as opposed to EOMB, thus pair[1] may be undefined
}
return null;
}
你能给我们提供更多关于为什么不起作用的细节吗?你看到了什么?你能在浏览器的开发工具中加入断点吗?你看到了什么?谢谢Rup,恐怕我还不知道如何设置断点(现在)但是在Chromes控制台中查看它时,它没有返回任何错误,因此我不确定它到底是怎么回事?在Chrome的开发工具中,转到“脚本”选项卡,找到此代码,然后左键单击要停止的函数中的行号。对-这就是问题所在。您可以在代码中逐步查看它并检查变量以查看发生了什么,哪里出了问题?如果我将鼠标悬停在$.cookie上,这一行
if($.cookie(“html_img”){
我得到了“undefined”,这意味着它没有陷入cookie脚本?
#bg-style { width:100%; height: 700px; position:absolute; }
.btncontain { width:80%; margin: 0 auto; position:absolute; }
.btn a { width: 150px; height: 70px; background: yellow; float: left; margin: 0 30px 100px 30px; }
#bg-style {
background: url(../images/k2-in-skies.jpg) no-repeat center top;
}
function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && (!/Object/.test(Object.prototype.toString.call(value)) || value === null || value === undefined)) {
options = $.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var decode = options.raw ? function(s) { return s; } : decodeURIComponent;
var pairs = document.cookie.split('; ');
for (var i = 0, pair; pair = pairs[i] && pairs[i].split('='); i++) {
if (decode(pair[0]) === key) return decode(pair[1] || ''); // IE saves cookies with empty string as "c; ", e.g. without "=" as opposed to EOMB, thus pair[1] may be undefined
}
return null;
}