这是一款效果十分炫酷的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代码请参考下载文件。