jQuery和css3鼠标滑过背景模糊特效

当前位置:主页 > jQuery库 > 布局和界面 > jQuery和css3鼠标滑过背景模糊特效
jQuery和css3鼠标滑过背景模糊特效
分享:

    插件介绍

    这是一款效果非常不错的jQuery和css3鼠标滑过背景模糊特效。该特效果中页面上的所有项目以网格形式分布,当鼠标滑过其中的一个项目时,该项目放大并带阴影效果,其他所有项目则缩小变模糊。

    浏览器兼容性

    浏览器兼容性
    时间:2014-11-28
    阅读:

简要教程

这是一款效果十分炫酷的jQuery和css3鼠标滑过背景模糊特效。在插件中使用了CSS3 transitions和使用jQuery来切换class。不是所有的浏览器都支持CSS3 transitions,最好使用Chrome或Safari浏览器来查看demo。

HTML

html结构十分简单:

<section class="ib-container" id="ib-container">
    <article>
        <header>
            <h3><a href="#">Some Headline</a></h3>
            <span>Some other text</span>
        </header>
        <p>Some introduction</p>
    </article>
    <article>
        <!-- ... -->
    </article>
    <!-- ... -->
</section>
                

JAVASCRIPT

当我们用鼠标hover一篇文章,将使用jQuery给当前鼠标滑过的文章一个class active,而给其它文章一个class blur

var $container  = $('#ib-container'),
    $articles   = $container.children('article'),
    timeout;

$articles.on( 'mouseenter', function( event ) {
        
    var $article    = $(this);
    clearTimeout( timeout );
    timeout = setTimeout( function() {
        
        if( $article.hasClass('active') ) return false;
        
        $articles.not($article).removeClass('active').addClass('blur');
        
        $article.removeClass('blur').addClass('active');
        
    }, 75 );
    
});

$container.on( 'mouseleave', function( event ) {
    
    clearTimeout( timeout );
    $articles.removeClass('active blur');
    
});

css代码请参考下载文件。