转载

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

简要教程

refocus是一款可以实现背景图片镜头模糊特效的轻量级jQuery插件。该插件可以制作出类似摄像机镜头聚焦和不聚焦的效果。它使用的是CSS filter和transition属性来实现。

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

查看演示 下载插件

使用方法

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

HTML结构

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

I'm a 'Hero' header.

CSS样式

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

/*加大或减小模糊程度*/ #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; }

初始化插件

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

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

来源 jQuery之家

正文到此结束

所属分类：编程技术

本文标签： HTML5 CSS UI http jquery src 插件 js DOM web HTML 代码
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

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

I'm a 'Hero' header.

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流