javascript图像翻转答案

【问题标题】：javascript image rolloverjavascript图像翻转
【发布时间】：2011-12-10 22:41:35
【问题描述】：

您好，我有一个关于图像翻转的问题，但不是您想的那样。

我看过一个示例 http://www.asos.com/ 并单击主页按钮（顶部导航最左侧）

您可以看到，当您将图像悬停时，该图像保持突出显示，而其他图像变暗。

我知道这是用 jquery 完成的，但代码非常混乱。有没有人见过这个或者知道怎么做？

谢谢

【问题讨论】：

标签： javascript jquery rollover

【解决方案1】：

首先：Firebug 是你的朋友。所采用的技术比人们想象的要简单：它们只是将图像的不透明度降低到 0.3。由于背景是黑色的，因此图像显得较暗。所以代码可能看起来像这样：

$('img.fade').live('mouseover', function (e) {
    var $this = $(this).fadeTo(500, 1.0);
    $('img.fade').not($this).fadeTo(500, .3);
);
$('img.fade').live('mouseout', function (e) {
    var $this = $(this);
    $('img.fade').not($this).fadeTo(500, 1.0);
);

【讨论】：

所以这可以在没有 jquery 的情况下有效地实现，但他们正在使用它来淡化图像？
纯技术上来说，任何可以用jQuery实现的东西，也可以用纯JavaScript实现，不需要库。在很多情况下，这将是一个巨大的麻烦。所以是的，它也可以在没有 jQuery 的情况下实现。

【解决方案2】：

快速解决方案（我猜它可以调整得更短）：

<div class="images">
    <img src="http://www.google.com/google.jpg" />
    <img src="http://www.google.com/google.jpg" />
    <img src="http://www.google.com/google.jpg" />
    <img src="http://www.google.com/google.jpg" />
</div>

<script type="text/javascript">
$().ready(function(){
    $('.images img').hover(
        function(){
            $(this).parents('.images').find('img').not(this).animate({"opacity": "0.3"}, 200);
            $(this).animate({"opacity": "1"}, 200);
        }, 
        function(){
            $(this).animate({"opacity": "1"}, 200);
        }
    );
$('.images').bind('mouseleave',function(){$(this).find('img').animate({"opacity": "1"}, 200);});
});

【讨论】：