Question

您好我对图像翻转有疑问，但这不是您的想法。

我见过一个示例http://www.asos.com/，然后点击主页按钮（最左边的导航栏）

您可以看到，当您翻转图像时，图像会突出显示而其他图像会变暗。

我知道这已经完成了jquery，但代码非常混乱。有没有人见过这个或知道怎么做？

由于

Answer 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);
);

Answer 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);});
});

javascript图像翻转

2 个答案: