jQuery背景圖片閃爍和保證金的困境

我試圖嘗試從頭開始重建我的個人投資組合網站，主要是針對jQuery實踐，而且我只是剛剛開始，但我有2個問題。jQuery背景圖片閃爍和保證金的困境

首先，下面就來什麼，我至今預覽鏈接：http://www.forrestmckinney.com/portfolio-preview/

基本上我的想法是有與滾動到視圖上的所有其他導航點擊div的大背景圖像。當div滾動時，背景圖像會改變。不過，我也希望divs能夠通過break_size函數動態調整大小，這是我遇到問題的地方。該功能對於設置每個div的大小非常有用，即使在調整大小時也是如此，但由於某些原因間距已關閉。第一個精細顯示出來，然後每一個經過太高：

function break_size() { 
    var windowY = $(window).height(); 
    var breakHeight =(94 * windowY)/100; 

    var marginY = ((windowY - breakHeight)/2); 

    $('.break').css('height', breakHeight); 
    $('.break').css('margin-top', marginY + windowY); 
    $('.break').css('margin-bottom', marginY); 
}

所以，除非我失去了一些東西，這個程序必須在每次。BREAK div的高度設置爲窗口HIGHT的94％，將marginY變量設置爲（窗口高度 - 斷開高度）/ 2（頂部一半，底部一半），然後將底部邊距設置爲邊緣Y和頂部邊距至邊緣Y加上窗口高度（有效將每個div隔開一個窗口高度，允許完整的背景圖像顯示在div之間）。

我遇到的另一個問題是圖像之間的閃爍。我已經添加了e.preventDefaults（），但沒有運氣。

任何人都知道那裏發生了什麼？提前致謝！

來源

2013-04-04 Forrest McKinney

var image_url = 'url(images/image1.jpg';

第15行錯字，缺少括號。

你的數學是準確的，但有些東西不能與CSS一起工作。元素定位不正確。它看起來像每個元素的底部邊緣不影響它的波紋管。我無法找出這是爲什麼，但我找到了一個解決辦法，下邊距添加到其他元素的頂部：

$('.break').css('height', breakHeight); 
//remove bottom margin, use extra top margin instead 
$('.break').css('margin-top', marginY + marginY + windowY); 
//normal margin for first child 
$('.break:first-child').css('margin-top', marginY + windowY);

從理論上講，這可能在你的安裝工作，但我沒有測試。至於閃爍，我可能也是錯誤的，所以讓我知道，但它看起來像你在任何時候按下按鈕改變背景圖像。單獨更改背景圖像會導致這種情況，但每次單擊該按鈕時也不需要更改。您應該堆疊圖像並更改堆疊圖像的可見性，這樣它們就會被預加載。然後，只在需要時交換圖像。

來源

2013-04-04 19:39:59 jamil

jQuery背景圖片閃爍和保證金的困境

回答

相關問題