Javascript flexy背景图片不工作

我想创建一个flexibg图像，但它不工作。Javascript flexy背景图片不工作

我按照这个指南：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>

来源

2011-05-31 Rails beginner

这是一个非常多的代码，你甚至都不知道问题是什么;你的页面对我来说看起来很好。 – Pointy 2011-05-31 14:49:20

同样在这里，页面似乎工作正常。 – Exelian 2011-05-31 14:52:17

我正在使用firefox 4.图像没有伸展。你们有没有人知道如何简化代码？ – 2011-05-31 15:02:57

不知道什么地方错了。认为我更新了Jquery。

来源

2011-05-31 18:38:18

Javascript flexy背景图片不工作

回答

相关问题