使用固定位置的按鈕將圖像適合寬度

我有一個具有以下功能的頁面：有一個大的圖像可生成scoll（水平和垂直）和一個固定位置的按鈕（它保留在左上角，即使使用滾動），點擊時，圖像適合客戶端寬度。使用固定位置的按鈕將圖像適合寬度

由於position: fixed在網絡不支持Explorer 8中，我使用了一個解決辦法 - 這是功能：

function setFixedPosition(jqueryWrapper, pixelsFromTop, pixelsFromLeft) { 

    jqueryWrapper.css('position', 'absolute'); 

    var setOffsets = function() { 
     jqueryWrapper.css("top", (($(window).scrollTop() + pixelsFromTop) + "px")); 
     jqueryWrapper.css("left", (($(window).scrollLeft() + pixelsFromLeft) + "px")); 
    }; 

    setOffsets(); 

    $(window).scroll(function() { 
     setOffsets(); 
    }); 
} 

setFixedPosition($('#zoomFitButton'), 15, 15);

這是按鈕的動作：

$('#zoomFitButton').click(function() { 
    $('img.preview').css('width', '100%'); 
});

按鈕保持不變無論是在Firefox 13和IE8。

但是，IE8下，如果我的地方滾動，然後我點擊按鈕，該按鈕移動到一個「奇怪」的位置：

如果我垂直滾動，然後點擊，它把在按鈕左下角;
如果我水平滾動，然後點擊，它把按鈕在右上角;
如果我滾動兩種方式，然後點擊，它把按鈕某處中心。

在Firefox中，即使在單擊適合寬度按鈕之後，按鈕仍然位於左上角（我期望它的位置）。

這裏是a test page。

我的代碼是否適合此功能（原則上），或者我需要添加一些適合寬度操作（以修復我的按鈕定位）;或者IE瀏覽器出現問題（我需要一種解決方法 - 如果有的話，有什麼建議嗎？）？

謝謝。

來源

2012-07-09 Nicolae Albu

http://stackoverflow.com/questions/1628265/how-to-get-positionfixed-css-to-work-in-ie-7-with-transitional-doctype – Austin 2012-07-09 17:08:59

@奧斯汀感謝，它在IE8（並可能在7）。我還是想找到什麼是錯我的解決辦法，特別是如果某些客戶端將使用IE6。 – 2012-07-09 17:25:51

我發現，在IE6也有效的解決方案。

我認爲這個問題與IE沒有更新文檔大小後更新scrollTop和scrollLeft位置有關。
因此，在調整圖片大小後，我必須滾動到左上角（scrollTop（0）和scrollLeft（0））。
不幸的是，如果我有一張需要垂直滾動的大圖片，即使它適合寬度，解決方法也會將我帶到頁面的頂部。所以我添加了代碼，可以按比例將我恢復到之前的接近位置。我裹邏輯更通用的功能：

function doSomethingThatAffectsScrollPosition(affectingScrollPositionFunction) { 

    var oldDocumentWidth = $(document).width(); 
    var oldScrollFromLeft = $(window).scrollLeft(); 

    var oldDocumentHeight = $(document).height(); 
    var oldScrollFromTop = $(window).scrollTop(); 

    affectingScrollPositionFunction(); 

    var newDocumentWidth = $(document).width(); 
    var widthRatio = (newDocumentWidth/oldDocumentWidth); 
    var newScrollFromLeft = (oldScrollFromLeft * widthRatio); 

    var newDocumentHeight = $(document).height(); 
    var heightRatio = (newDocumentHeight/oldDocumentHeight); 
    var newScrollFromTop = (oldScrollFromTop * heightRatio); 

    $(window).scrollLeft(0); // Needed for button repositioning 
    $(window).scrollLeft(newScrollFromLeft); 

    $(window).scrollTop(0); // Needed for button repositioning 
    $(window).scrollTop(newScrollFromTop); 
}

我在適合寬度按鈕的動作中使用的功能：

$('#zoomFitButton').click(function() { 
    doSomethingThatAffectsScrollPosition(function() { 
     $('img.preview').css('width', '100%'); 
    }); 
});

Here是一個測試頁面。

來源

2012-07-10 10:05:12

使用固定位置的按鈕將圖像適合寬度

回答

相關問題