这是一款效果十分炫酷的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代码请参考下载文件。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!