Skew.js是一款能够制作DOM元素倾斜特效的jQuery插件。你可以控制元素在x和y轴上多少像素进行倾斜,还能够控制在屏幕尺寸改变时,更新元素的倾斜效果。

使用方法

在页面中引入skew.min.js文件,jQuery不是必须的,如果比想将它作为jQuery插件来使用,就引入jQuery。

<script type="text/javascript" src="skew.min.js"></script>                    
                
初始化插件

作为jQuery插件来使用:

$(function() {
  $('selector').skew({x: 50});
});
                

作为js插件来使用:

window.onload = function() {
  var Skew = new Skew('selector', {x: 50});
}
                
插件调用语法

JavaScript

var skewObj = new Skew('selector', {option: value});
//example
var skewObj = new Skew('.skew', {x: 50, y: 100, breakpoints: [{break: 768, x: 30}]});

skewObject.method(argument);
//example
skewObj.update({x: 30, breakpoints: [{break: 768, x: 15}]});                 
                

jQuery

$('selector').skew({option: value});
//example
$('.skew').skew({x: 50, y: 100, breakpoints: [{break: 768, x: 30}]});

$('selector').skew('method', argument);
//example
$('.skew').skew('update', {x: 30, breakpoints: [{break: 768, x: 15}]});               
                

配置参数

参数 类型 默认值 描述
x int 0 元素在x轴多少像素进行倾斜
y int 0 元素在y轴多少像素进行倾斜
unskewContent bool/string false 元素中不想进行倾斜的元素
breakpoints array [] 屏幕分辨率断点对象。
debounce boolean true 在屏幕尺寸改变时消除抖动
debounceTime int 50 消抖的时间,单位毫秒

该jQuery制作DOM元素倾斜特效插件的github地址为:https://github.com/wiserim/Skew