tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 图片滤镜来实现照片的移轴镜头效果。使用非常简单,使用 data 属性配置参数。温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。

效果演示      插件下载

  HTML 示例:

<img src="url" class="tiltshift" data-position="50" data-blur="2" data-focus="10" data-falloff="10" data-direction="y">
  • -position(0-100),定义对焦点的位置。
  • -blur(0 - ?),模糊半径。设置为1或2比较合适。
  • -focus(0-100),焦点的区域大小。
  • -falloff (0-100),完全焦点和完全模糊之间的区域大小。
  • -direction(“x”,“y”,或 0-360),方向。

  JavaScript 调用示例:

$(function() {
$('.tiltshift').tiltShift();
});
您可能感兴趣的相关文章

本文链接:tiltShift.js - CSS3 滤镜实现照片移轴镜头效果

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

tiltShift.js - CSS3 滤镜实现移轴镜头效果的更多相关文章

  1. 用Js+css3实现图片旋转,缩放,裁剪,滤镜

    还是前端图片的老话题,花了半天时间,东拼西凑,凑出个demo,优点在于代码少,核心代码就6行,目前刚做了旋转,缩放,裁剪,滤镜要js做,网络上也有现成的代码, 但是想做到自定义的滤镜咋办呢?这还要从底 ...

  2. 使用CSS3+jquery.js 实现微信抽奖转盘效果

    上次发表了一篇 微信抽奖转盘活动-效果源码分析 最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 “CSS3”! 为什么不能用CSS3来实现呢? 所以我打算用CSS3来实现这个效果.并不需要依赖 ...

  3. css3的滤镜模糊的效果

    最近在做一个css3的滤镜模糊的效果,但是我发现,有些浏览器一点效果都没有,这是浏览器兼容性导致的,怕今后会忘记所以就先写下来,也希望可以帮到需要的小伙伴. 代码如下: div{//设置半透明滤镜效果 ...

  4. CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

    一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...

  5. CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解[转]

    一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...

  6. 【CSS3】CSS3 滤镜实现

    作者:^_^肥仔John      来源:CSS3魔法堂:CSS3滤镜及Canvas.SVG和IE滤镜替代方案详解 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后 ...

  7. H5+JS+CSS3 综合应用

    慕课网新教程H5+JS+CSS3 实现的七夕言情主题效果已经出炉了 从设计到实现到录制与编写用了快1个月的时间,说真的这个案例是慕课定制的,我之前也没有系统的做过这样的一个效果,在实现的时候自己也重新 ...

  8. 基于css3的轮播效果

    花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...

  9. Filter Effects - 使用 CSS3 滤镜处理图片

    CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能.CSS3 Fitler 常用于调整图像的渲染.背景或边框显示效果.这里给大家分享的这个网站,大家可以体验下 CSS3 对图片的处理 ...

随机推荐

  1. 将图片在指定窗口中显示-OpenCV应用学习笔记一

    1.OpenCV模块划分 OpenCV其实就是一堆用C和C++语言来实现计算机视觉算法的源代码文件:例如C接口函数cvCany()实现了Canny边缘提取算法,我们可以直接将这些源代码添加到自己的软件 ...

  2. mysql 数值函数

    可使用常见的算术操作符.注意就 -. +和 *而言, 若两个参数均为正数,则其计算结果的精确度为 BIGINT (64比特),若其中一个参数为无符号整数, 而其它参数也是整数, 则结果为无符号整数.请 ...

  3. Use Hibernate core API

    For Hibernate configuration, We can use hibernate.cfg.xml file to configure: <?xml version='1.0' ...

  4. Android Studio 无法启动模拟器的一种可能是你装的是Ghost版的系统

    我遇到的问题是,打开模拟器,进度条走到最后,突然出现了emulator error,然后模拟器就无法启动(不好意思当时没有截图).我是在Ghost版 win7系统下运行Android Studio 的 ...

  5. javascript检测ActiveX插件是否安装/启用

    本文主要提供在IE浏览器下检测ActiveX插件安装/启用的状态. 在一些应用开发中,需要用到一些第三方提供的ActiveX插件,如Flash插件. 为了在未安装插件的浏览器显示友好的提示,需要用到主 ...

  6. 【Bugly 技术干货】Android开发必备知识:为什么说Kotlin值得一试

    1.Hello, Kotlin Bugly 技术干货系列内容主要涉及移动开发方向,是由 Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 1. ...

  7. JavaScript使用DeviceOne开发实战(五)仿ZAKER应用

    关于index底下切换的的组件,可以用ViewShower实现,详见: do_ViewShower http://bbs.deviceone.net/forum.php?mod=viewthread& ...

  8. Python--过滤Mysql慢日志

    ##================================================================## 先来个笑话: 刚交的女朋友让我去他家玩,我觉得空手不好,于是告 ...

  9. Unity3D使用经验总结 优点篇

    09年还在和其它小伙伴开发引擎的时候,Unity3D就初露头角. 当时就对这种基于组件式的设计结构很不理解. 觉得拆分过于细致,同时影响效率. 而时至今日,UNITY3D已经成为了众多团队的首选3D引 ...

  10. 简化工作流程,10款必备的HTML5开发工具

    利用HTML5工具不仅可以帮助设计师和开发者创建更具吸引力的网站,还能增加网站的可用性和可访问性.本文收集了10款HTML5开发工具让你在网页中搭建特效.动画.视频.音频等诸多功能,为你节省更多开发时 ...