关于javascript：使用固定位置的按钮将图像调整为宽度

Fit image to width using fixed positioned button

我有一个页面，该页面具有以下功能：有一个大图像会生成scoll(水平和垂直)，还有一个固定位置的按钮(即使滚动也保持在左上角)，当单击该按钮时，使图像适合客户端宽度。

因为Internet Explorer 8不支持position: fixed，所以我使用了一种解决方法-这是该功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这是按钮的操作：

1
2
3

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

该按钮在Firefox 13和IE8中均保持固定。

但是，在IE8下，如果我滚动到某个地方，则单击按钮，该按钮将移至" strange "位置：

如果我垂直滚动，然后单击，它将按钮放在左下角；
如果我水平滚动，然后单击，它将按钮放在右上角；
如果我双向滚动，然后单击，它将按钮放置在中间的某个位置。

在Firefox中，即使单击了"适合宽度"按钮，该按钮也始终保留在左上角(我期望的位置)。

这是测试页。

我的代码是否可以使用此功能(原则上)，或者我需要添加一些内容以适合宽度操作(以固定按钮位置)；还是IE出现问题(我需要解决方法-如果可以，是否有任何建议？)？

谢谢。

相关讨论

我找到了也可以在IE6中使用的解决方案。

我认为问题与IE在调整文档大小后不更新scrollTop和scrollLeft位置有关。

因此，在调整图片大小之后，必须滚动到左上角(scrollTop(0)和scrollLeft(0))。

不幸的是，如果我有一张大图片，即使它适合宽度，也需要垂直滚动，但是变通方法将我带到了页面顶部。因此，我添加了代码以使我按比例回到以前的位置。我将逻辑package在一个更通用的函数中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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);
}

然后我在"适合宽度"按钮的操作中使用了该功能：

1
2
3
4
5

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

这是测试页。