jQuery中的animate（）如何影響頁面流和溢出屬性？

嘿傢伙，所以我剛讀完我的第一本xhtml/css書，現在在javascript/html中。我想做一個非常簡單的效果，但無法弄清楚，因爲我不熟悉jquery（和javascript）。jQuery中的animate（）如何影響頁面流和溢出屬性？

所以我想就是這樣的一個效果：kk.pcriot.com/websites.html

在圖像周圍移動，但有一種「面具」周圍的邊框所以其支架固定到位，但圖像移動（鼠標過度）。一旦鼠標光標不在其上方，圖像就會回到原來的位置，但看起來很簡單。現在，我只是想弄清楚如何創建該掩碼....它很簡單，有一個靜態圖像和overflow:hidden屬性，但我認爲animate()將該元素從流中或某物中取出，因爲我無法獲得溢出上班。也許它與位置屬性也有關係。

這裏是我的代碼：

CSS：

div { width : 100px; height: 100px; 
    border: thin solid red; 
    overflow:hidden; 
    } 

img { position:absolute; 
height: 200px; 
width: 300px;

;}

腳本：

<script src="jquery-1.7.2.js"></script> 
<script> 
$(document).ready(function(){ 

$("#clickme").click(function() { 
    $("#book").animate({ 

    left: '+=150', 

    } 
});

體：

<div id="clickme"> 
    Click here 
</div> 
<image id="book" src="../Images/test.jpg" (Newbs cant post images so I didnt use IMG) 
    />

所以...它有動畫，但溢出屬性不起作用。當我拿出腳本時，溢出屬性可以工作，但顯然動畫不行！

來源

2012-04-21 not crazy

請創建一個jsFiddle演示。 – Sparky 2012-04-21 16:01:13

根據你的HTML，圖像根本不會有「溢出」。 'overflow'屬性將應用於'img'的父容器，並且在代碼中沒有看到圖像周圍的容器。 – Sparky 2012-04-21 16:03:41

更新了的jsfiddle移動懸停的形象和清理CSS。 http://jsfiddle.net/Q4zXd/3/

如果您希望圖像比容器大，並且要將其中的一部分隱藏起來，然後在您將鼠標懸停在該區域時進入視圖，則需要該圖像位於容器中。

您需要將容器放置爲相對位置的原因是爲了使內部元素（img）相對於包含元素位於絕對位置，而不是窗口。默認情況下，絕對定位的元素將從文檔流中取出並相對於窗口定位，而不是包含元素，除非包含元素相對定位（絕對也適用，但該元素不再位於文檔中流程。）

來源

2012-04-21 23:43:17 LocalPCGuy

我不得不一遍又一遍地重讀你的解釋，但是謝謝！ – 2012-04-28 05:16:30

overflow: hidden

只適用於您的情況，父母也有絕對的位置。還要注意@Sparky672的評論。圖片必須在div內。

我已經建立了一個演示給你：

http://jsfiddle.net/Q4zXd/

來源

2012-04-21 16:24:35

謝謝你的幫助。我之前嘗試添加一個容器，但這似乎並不工作.http：//jsfiddle.net/YVHkP/所以當我添加這些CSS行時，JS代碼不能運行...我現在試着玩弄它，看看我在這裏錯過了什麼。 – 2012-04-21 18:29:46

好吧，我不知道爲什麼它不會在jsfiddle上工作，但我得到它的工作。關鍵是使#book div相對於容器絕對。不要問我如何工作大聲笑。我試圖弄清楚。 http://jsfiddle.net/Srw8U/1/最後一步是在點擊時減少干擾。 – 2012-04-21 21:28:37

jQuery中的animate（）如何影響頁面流和溢出屬性？

回答

相關問題