0

大家好，我刚读完我的第一本 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)
   />

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

4

2 回答 2

0 
overflow: hidden

仅适用于您的情况，当父级也具有绝对位置时。还要注意@Sparky672 的评论。图像必须在 div 内。

我为您设置了一个演示：

http://jsfiddle.net/Q4zXd/

于 2012-04-21T16:24:35.397 回答
0

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

如果您希望图像大于容器并隐藏其中的一部分，然后当您将鼠标悬停在该区域上时移动到视图中，则需要将图像放在容器中。

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

于 2012-04-21T23:43:17.053 回答