淡化图像位置

Question

我有一个这样的列表：

<ul>
    <li><a href="#"><img src="/userfiles/test.png" alt="" /></a></li>
    <li><a href="#"><img src="/userfiles/test2.png" alt="" /></a></li>
</ul>

每张图片的宽度为 950 像素，高度为 600 像素。

前 300 像素的高度是鼠标移出图像，最后 300 像素是我想要淡出的鼠标悬停图像。这可能吗？

我有这个 CSS 来控制要显示的图像：

ul { list-style: none; padding: 0; margin: 0; }
ul li { width: 950px; height: 300px; overflow: hidden; position: relative; }
ul li img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

此代码只是将图像的最后 300 个像素向上移动，但我不想移动它，而是希望将图像不透明地淡入“其他”：。

<script type="text/javascript">
        $(document).ready(function () {
            $("ul li img").mouseover(function () {
                $(this).stop().animate(
                    { top: "-300px" },
                    { duration: 300 })
            })
            .mouseout(function () {
                $(this).stop().animate(
                    { top: "0" },
                    { duration: 300 })
            })
        });
    </script>

Answer 1

我想我明白了。工作示例：

http://jsfiddle.net/avall/RMWt8/1/

该解决方案使用overflow 样式并使用图层（z-index）。

当你从下到上用鼠标移动时，由于中心线错误，它应该稍微升级，但你应该明白了。

Answer 2

刚刚完成了这个，感谢您提供了一个不错且相当简短的练习。

First off, see the end result here.

实施说明：

1. 如果可能，请考虑更改您的标记。如果您将图像用作background-image 而不是独立的img 元素，这会容易得多（我什至可以说是微不足道的），而且性能也会更高。
2. 该解决方案的工作原理是为每个 img 元素添加一个“姐妹”div 并对其进行适当的样式设置。最重要的是设置它的background-image 属性，它允许我们只显示所需的一半图片。
3. 该解决方案需要动态计算源图像的大小，我使用的是solution presented here。