切換點擊可擴展背景

Question

我想創建一個鏈接;例如。 '點擊這裏進行背景演示'。然後點擊鏈接;網頁的背景將顯示圖像，並且該圖像是可擴展的。

我有獨立的可擴展背景解決方案;使用以下。

但我怎麼才能只顯示'點擊';實施。

<!--Expandable BG code IE 7 +--> 

    <style> 

       #bg { position: fixed; top: 0; left: 0; } 
       .bgwidth { width: 100%; } 
       .bgheight { height: 100%; } 

       #page-wrap { position: relative; width: 950px; margin-left: auto; margin-right: auto;; } 

    </style> 


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
     <script> 
       $(function() { 
         var theWindow  = $(window), 
          $bg    = $("#bg"), 
          aspectRatio  = $bg.width()/$bg.height(); 

         function resizeBg() { 

           if ((theWindow.width()/theWindow.height()) < aspectRatio) { 
            $bg 
             .removeClass() 
             .addClass('bgheight'); 
           } else { 
            $bg 
             .removeClass() 
             .addClass('bgwidth'); 
           } 

         } 

         theWindow.resize(function() { 
           resizeBg(); 
         }).trigger("resize"); 

       }); 
     </script> 


<!--Expandable BG code IE 7 +--> 

Answer 1

，可以有以下resize處理

theWindow.resize(function() { 
    resizeBg(); 
}).trigger("resize"); 

如果你想調用它點擊一個鏈接，那麼你可以使用

$('a.link').on('click', function(e){ 
    e.preventDefault(); 
    resizeBg(); 
}); 

只要把後click給出的代碼/在您的theWindow.resiz處理程序之前。另外，還要確保你有一個a標籤與link類，像

<a href="#" class="link">Click</a> 

而且從resize處理除去.trigger("resize");停止處理程序被調用的onload。