Question

嘿伙计们，所以我刚刚读完了我的第一本xhtml / css书，现在正处于javascript / html版本的中间。我想做一个非常简单的效果，但无法弄明白，因为我不熟悉jquery（以及javascript）。

所以我想要一个像这样的效果：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)
   />

所以...它确实有动画，但溢出属性不起作用。当我取出脚本时，overflow属性确实有效，但很明显动画没有！

Answer 1

overflow: hidden

只适用于你的情况，当父母的位置也是绝对的时候。另外要注意@ Sparky672的评论。图像必须位于div内。

我为你设置了一个演示：

http://jsfiddle.net/Q4zXd/

Answer 2

更新了jsfiddle以在悬停时移动图像并清理CSS。 http://jsfiddle.net/Q4zXd/3/

如果您想要将图像放在容器中，并且要将其中的一部分隐藏起来，然后将鼠标悬停在该区域上，则需要将图像移动到视图中。

您需要将容器定位为相对的原因是使内部元素（img）相对于包含元素而不是窗口位于绝对位置。默认情况下，绝对定位的元素从文档流中取出并相对于窗口而不是包含元素定位，除非包含元素相对定位（绝对也可以工作，但那个元素不再在文档中）流。）

jquery中的animate（）如何影响页面流和溢出属性？

2 个答案: