2011-11-02 31 views
2

我曾經在很多論壇上,但沒有人能給我答案。這個網站是我最後的機會。CSS:如何更正圖片的位置

我有一個基於javascript的圖像查看器。如果圖像的列(JS cound取決於php/mysql的行數)有一定的計數。現在,在輸出中有三列圖像,分兩行顯示。當我有一個最大的屏幕分辨率,我可以打開這個鏈接,查看觀衆的樣子:

http://jsfiddle.net/5mfbM/22/

的圖像縮略圖。當我將鼠標移動到第三個縮略圖上時,圖像會自動縮放。根據圖像大小,我通過css定位校正圖像的位置,向右或向左。所以圖像留在窗口/屏幕的內部大小內。所以它應該保持在第一行的位置,在右邊。但是會發生什麼情況是圖像會跳到左邊的下一行(您會看到圖像閃爍,因爲有隱藏圖像的onmouseout事件)。我問如何在下一行停止跳轉,並忽略css規則的相對位置。我讓父母的潛水範圍很廣,以確保圖像有足夠的空間。

編輯: 我從螢火蟲的CSS debuger這些圖片向您展示的樣式:

Image 1

Image 2

Image 3

圖像2相同的鏈接,但「viu1319790616v.jpg 「 和圖像3相同的鏈接,但」bwy1319790927w.jpg「

+0

喜@Joe上。我在JS調試中是一個零,但只是想知道:你需要你的畫廊做什麼?放大時放大?如果你找不到解決方案,那麼有很多畫廊使用同一個庫。 – Yisela

+0

@utopicam:我沒有說它是畫廊!我不看圖像庫。這是給予特定情況的圖像查看器。給予圖像瀏覽器快速忽略圖像,而不點擊它們。點擊操作是爲不同目的而預先定義的,然後查看圖像。我認爲這更多的是CSS和JS。 – Joe

回答

0

嘗試在CSS中使用縮放屬性。你可以避免一大段代碼。

+0

該屬性只是一個MS IE專有屬性,它不會在FF或許多其他瀏覽器中工作。 – Yisela

+0

雖然你可以在Firefox中使用-moz-transform。我剛剛意識到:P – Yisela

+0

@utopicam:縮放在Firefox或Opera中不起作用,但它在Chrome(從版本2開始)和Safari(從版本4開始)中都可以使用。 –

0

我後來注意到,在我原來的代碼中,我排除了onload = setImages();我不記得我爲什麼這樣做,但在我看來,這是不同的,導致jsfiddle示例沒有。 22沒有正常工作。因此,這裏是沒有onload事件的新更新: example #24 這一個獲得thumnnail到其原始大小。

它看起來像這樣的代碼工作正常上的jsfiddle(延長窗口/框架樑上以獲得最大的寬度,如果窗口/幀),而不是我的計算機中的原始代碼...