0

此时我有一个背景图像滑块，用户可以在其中单击一个按钮并在查看站点时选择七个图像中的一个作为背景，当然问题是当他们单击时会被扔到不同的页面它恢复为默认图像。有没有办法让 jquery.cookie.js 解决这个问题？以下是我的尝试。

有效的 jQuery 部分：

            $(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 部分： $(function() {

                if($.cookie("html_img")) {
                    $('html').css("background-image", $.cookie("html_img"));
                }

                $('.btn a').click(function() {

                    var image = 'imgs/someimage.jpg';
                    // var image = $(this).attr('src');

                    $('html').css("background-image", image);

                    $.cookie("html_img", image, {expires:7});

                    return false;

                });

            });

的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>

CSS：

             #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;
            }

非常感谢！

4

1 回答 1

0

这很方便，我在 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;
                }
于 2012-07-06T14:18:37.727 回答