实现背景图片镜头模糊特效的jQuery插件

<link rel="stylesheet" href="css/refocus.css">               

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/refocus.js"></script>      

 使用该镜头模糊特效插件需要引入jQuery和refocus.js和refocus.css文件。

 

 

<div class="refocus" id="hero-header">
  <div class="refocus-img-bg"></div>
  <!--带focus-in的容器中的内容将被模糊处理-->
  <div class="refocus-img focus-in">
    <img src="bg.jpg">
  </div>
  <!--带focus-out的容器中的内容不会变模糊-->
  <div class="refocus-text-container">
    <div class="t">
      <div class="tc">
        <h1 class="focus-out">I'm a 'Hero' header.</h1>
      </div>
    </div>
  </div>
</div>                 

HTML结构 

在HTML结果中，要分别为聚焦和不聚焦的容器添加focus-in和focus-out class。

 

 

/*加大或减小模糊程度*/
#refocus-1 .focus-out,
#refocus-1 .refocus-img-bg {
    filter: blur(15px);
    -webkit-filter: blur(15px);
}
/*下面的代码是修改显示的速度*/
#refocus-1 .focus-in,
#refocus-1 .focus-out {
    transition: filter 2s ease 0.3s;
    -webkit-transition: -webkit-filter 2s ease 0.3s;
}                 

CSS样式

引入refocus.css文件之后，如果你需要修改模糊的程度，可以修改refocus.css文件中下面代码的blur值。

 

 

$(window).load(function () {
    $('#refocus-1').refocus();
});                  

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该镜头模糊特效插件。

 

原文地址：http://www.htmleaf.com/jQuery/Image-Effects/201510132661.html