Home > Web Front-end > HTML Tutorial > tiltShift.js

tiltShift.js

WBOY
Release: 2016-06-24 11:52:24
Original
1123 people have browsed it

  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" alt="tiltShift.js" >
Copy after login

  • -position(0-100),定义对焦点的位置。
  • -blur(0 - ?),模糊半径。设置为1或2比较合适。
  • -focus(0-100),焦点的区域大小。
  • -falloff (0-100),完全焦点和完全模糊之间的区域大小。
  • -direction(“x”,“y”,或 0-360),方向。
  •   JavaScript 调用示例:

    $(function() {     $('.tiltshift').tiltShift();});
    Copy after login

     

     

    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template