jquery - 如何使用jquery突出显示一些图像

Question

如何使用 jquery 突出显示某些图像并模糊其余图像 onclick 事件。

<div class="portfolio-item2"  data-id="id-0" data-type="cat-item-4" style="float: left" id="abc">   
    <div>
        <span class="image-block">
            <a class="image-zoom" href="images/big/p1.jpg" rel="prettyPhoto[gallery]" title="Wall-E">
                <img src= "images/thumbs/p1.jpg" alt="Wall-E" width="320" height="250" title="Wall-E" id="im"/>                    
            </a>
        </span>
    </div>  
</div>
<div class="portfolio-item2" data-id="id-1" data-type="cat-item-2" style="float: left"  id="abcs" > 
    <div>
        <span class="image-block">
            <a class="image-zoom" href="images/big/pic2.jpg" rel="prettyPhoto[gallery]" title="Up">
                <img src="images/thumbs/p2.jpg" width="200" height="100" alt="Up" title="Up" />                    
            </a>
        </span>
    </div>  
</div>  

这是我的示例代码。请帮忙

Answer 1

向您要模糊的图像添加一个类

.bluredImages {
//reduce the opacity;    
}

或相反亦然。

在 jQuery 中，只需使用.addClass('bluredImages ')

更新：

对于仅使用 CSS 来模糊图像的跨浏览器方法，请检查此

Answer 2

尝试

.portfolio-item2.opaque {
    opacity: .5;
}

和

jQuery(function () {
    var $items = $('.portfolio-item2').click(function (e) {
        $items.not(this).addClass('opaque');
        $(this).removeClass('opaque');
        e.preventDefault();
    })
})

演示：小提琴