Javascript灵活的背景图片不起作用

问题描述

| 我正在尝试创建一个flexibg图像，但是它不起作用。我遵循了此指南：http://kimili.com/journal/flexible-scalable-background-image 您可以在这里看到问题： http://mobilhimlen.dk/ 我的flexi.js：

var flexiBackground = function(){

/**
    CONfigURATION:
    Define the size of our background image
*/
var bgImageSize = {
    width : 1050,height : 800
};

/**
    Declare and define variables
*/ 
var $window,$body,imageID = \"expando\",tallClass = \'tall\',wideClass = \'wide\',$bgImage,$wrapper,img,url,imgAR;

/**
    Are we dealing with ie6?
*/
var ie6 = ($.browser.msie && parseInt($.browser.version,10) <= 6);

/**
    Set up the action that happens on resize
*/
var resizeAction = function() {
    var win = {
        height : $window.height(),width : $window.width()
    };

    // The current aspect ratio of the window
    var winAR = win.width / win.height;

    // Determine if we need to show the image and whether it needs to stretch tall or wide
    if (win.width < bgImageSize.width && win.height < bgImageSize.height) {
        $body
            .removeClass(wideClass)
            .removeClass(tallClass);
    } else if ((win.w < bgImageSize.width && win.height >= bgImageSize.height) || (winAR < imgAR)) {
        $body
            .removeClass(wideClass)
            .addClass(tallClass);
        // Center the image
        $bgImage.css(\'left\',Math.min(((win.width - bgImageSize.width) / 2),0));
    } else if (win.width >= bgImageSize.width) {
        $body
            .addClass(wideClass)
            .removeClass(tallClass);
        $bgImage.css(\'left\',0);
    }

    // Need to fix the height of the wrapper for IE6
    if (ie6) {
        $wrapper.css(\'height\',win.height);
    }
};

return {

    /*
        Sets up the basic functionality
    */
    initialize : function() {

        // No need for any of this if the screen isn\'t bigger than the background image
        if (screen.availWidth <= bgImageSize.width || screen.availHeight <= bgImageSize.height) {
            return;
        }

        // Grab elements we\'ll reference throughout
        $window = $(window);
        $body = $(\'body\');

        // Parse out the URL of the background image and drop out if we don\'t have one
        url = $body.css(\'background-image\').replace(/^url\\((\"|\')?|(\"|\')?\\);?$/g,\'\') || false;  
        if (!url || url === \"none\" || url === \"\") {
            return;
        }

        // Get the aspect ratio of the image
        imgAR = bgImageSize.width / bgImageSize.height;

        // Create a new image element
        $bgImage = $(\'<img />\')
                    .attr(\'src\',url)
                    .attr(\'id\',imageID);

        // Create a wrapper and append the image to it.
        // The wrapper ensures we don\'t get scrollbars.
        $wrapper = $(\'<div></div>\')
                        .css({
                            \'overflow\' : \'hidden\',\'width\' : \'100%\',\'height\' : \'100%\',\'z-index\' : \'-1\'
                        })
                        .append($bgImage)
                        .appendTo($body);

        // IE6 Doesn\'t do position: fixed,so let\'s fake it out.
        // We\'ll apply a class which gets used in the CSS to emulate position: fixed
        // Otherwise,we\'ll simply used position: fixed.
        if (ie6) {
            $wrapper.addClass(\'ie6fixed\');
        } else {
            $wrapper.css({
                \'position\' : \'fixed\',\'top\' : 0,\'left\' : 0
            });
        }

        // Set up a resize listener to add/remove classes from the body 
        $window.bind(\'resize\',resizeAction);

        // Set it up by triggering a resize
        $window.trigger(\'resize\');
    }
};
}();

$(document).ready(flexiBackground.initialize);

和我的HTML：

<head>
<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\" type=\"text/javascript\" charset=\"utf-8\"></script>
     <script type=\"text/javascript\">
                    $(document).ready(function() {

                      // simple example,using all default options
                      $(\'div.expandable\').expander({slicePoint:       0});

                    });
                    </script>
                            <style type=\"text/css\" media=\"screen\">
                    body { 
                            padding: 0;
                            margin: 0;
                            background-image:url(../images/bg_page_defaults.jpg);
                            background-position: top center; 
                            background-repeat: no-repeat; 
                            background-attachment: fixed;
                            margin-top:50px;
                    }

                    img#expando { 
                            position: absolute; 
                            display: none; 
                            z-index: 1; 
                            -ms-interpolation-mode: bicubic; 
                    } 

                    .wide img#expando,.tall img#expando { 
                            display: block; 
                    } 

                    .wide img#expando { 
                            width: 100%; 
                            height: auto; 
                    } 

                    .tall img#expando { 
                            width: auto; 
                            height: 100%; 
                    }

                    .ie6fixed {
                            position: absolute;
                            top: expression((ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + \'px\') !important;
                    }

            </style>

    </script><script type=\"text/javascript\">

        var border = RUZEE.ShadedBorder.create({ corner:8,shadow:16,border:2 });

        border.render(\'round_me\');

</script>
</head>
<body>

<script src=\"flexibg.js\" type=\"text/javascript\" charset=\"utf-8\"></script>
</body>

解决方法

不知道哪里出了问题。认为我确实更新了Jquery。