如何达到以下效果?

时间:2013-01-26 10:16:27

标签: javascript jquery html

如果我们打开以下网站 - http://www.gazelle.com/并将鼠标悬停在图像上,我们会看到对图像的一些影响(所有图像都显示为灰色,只有一个图像是彩色的)。

请,只需调用效果的名称,我将自己调查更多,我可以编写代码,我只是不明白核心思想。

我试着查看代码。首先我认为他们在鼠标上改变了图像,但事实并非如此。我看到只显示图像:http://m0-beta.gazelle.com/images/pages/index/main_stack_products.png

4 个答案:

答案 0 :(得分:2)

每个<li>元素都有您发现的背景图片。每个background-position的{​​{1}}都不同。 (这样每个<li>显示一个图像)

当你的鼠标光标在一个图像上时,有一个css规则(它也可以是一个javascript函数)可以改变其他图像的难度。即如果您将鼠标放在ipad上,则所有其他<li>的不透明度将设置为0.5

这是网站实现效果的方式。

已编辑:如果您检查HTML元素,您可能会看到所有这些行为发生。

答案 1 :(得分:2)

两种风格规则就足够了。假设有一个.container元素,它包含许多.image元素。 .image元素可以是带有背景精灵图像的IMG或DIV或LI,如您提到的示例中那样无关紧要。效果可以这样实现:

.container:hover .image { opacity: .5; }
.container:hover .image:hover { opacity: 1; }

答案 2 :(得分:2)

我是通过使用CSS和:hover CSS伪类这样做的:

<ul>
    <li class="one">Object 1</li>
    <li class="two">Object 2</li>
    <li class="three">Object 3</li>
</ul>

ul li {
    width: 110px;
    height: 180px;
    text-align: center;
    display: inline-block;
    background: url('http://m0-beta.gazelle.com/images/pages/index/main_stack_products.png') no-repeat 0 0;
}
ul:hover > li {
    opacity: 0.6;
}
ul li:hover {
    opacity: 1;   
}
ul li.one {
    background-position: -110px 20px;   
}
ul li.two {
    width: 120px;
    background-position: -230px 20px;   
}
ul li.three {
    width: 100px;
    background-position: -365px 20px;   
}

http://jsfiddle.net/xESQK/

另一个解决方案是使用相同HTML的jQuery(可以在这里使用超时):

$(document).ready(function() {
    $('ul li').bind('mouseover', function() {
        $siblings = $(this).siblings();
        $siblings.animate({"opacity": "0.4"}, "fast"); 
    }).bind('mouseout', function() {
        $siblings.css('opacity', 1).stop(); 
    });
});

http://jsfiddle.net/xESQK/2/

答案 3 :(得分:0)

您可以这样使用。 DEmo

$(document).ready(function() {

    $('#special a').bind('mouseover', function(){
        $(this).parent('li').css({position:'relative'});
        var img = $(this).children('img');
        $('<div />').text(' ').css({
            'height': img.height(),
            'width': img.width(),
            'background-color': 'orange',
            'position': 'absolute',
            'top': 0,
            'left': 0,
            'opacity': 0.5
        }).bind('mouseout', function(){
            $(this).remove();
        }).insertAfter(this);
    });

});