javascript图像翻转 [英] javascript image rollover

问题描述

您好，我有一个有关图像翻转的问题，但这不是您的想法.

Hi I have a question about image rollover but it's not how you'd think.

我看过一个示例 http://www.asos.com/，然后单击主页按钮(导航栏最左端)

I've seen an example http://www.asos.com/ and click the home button(top nav far left)

您可以看到，将鼠标悬停在图像上时，该图像保持突出显示，其他图像变暗.

You can see that when you rollover an image that image stays highlighted and the others darken.

我知道这已经用jquery完成了，但是代码非常混乱.有没有人看过或知道如何做?

I know this has been done with jquery but the code is very messy. Has anyone seen this before or knows how to do it?

谢谢

推荐答案

快速解决方案(我想可以对其进行更短的调整):

Fast solution (it can be tuned shorter i guess):

<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图像翻转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！