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

刚刚完成了这项工作，感谢您提供了一个很好且相当短的练习。

<强> First off, see the end result here

实施说明：

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

Answer 2

我想我已经有了这个想法。工作示例：

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

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

当您从下到上使用鼠标时，由于中心线错误应该稍微升级，但您应该明白这一点。

淡化图像位置

2 个答案: