jQuery制作DOM元素倾斜特效插件Skew.js
源码介绍
Skew.js是一款能够制作DOM元素倾斜特效的jQuery插件。你可以控制元素在x和y轴上多少像素进行倾斜,还能够控制在屏幕尺寸改变时,更新元素的倾斜效果。 在页面中引入skew.min.js文件,jQuery不是必须的,如果比想将它作为jQuery插件来使用,就引入jQuery。 作为jQuery插件来使用: 作为js插件来使用: JavaScript jQuery 该jQuery制作DOM元素倾斜特效插件的github地址为:https://github.com/wiserim/Skew简要教程
使用方法
<script type="text/javascript" src="skew.min.js"></script>
初始化插件
$(function() {
$('selector').skew({x: 50});
});
window.onload = function() {
var Skew = new Skew('selector', {x: 50});
}
插件调用语法
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}]});
$('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元素倾斜特效插件Skew.js
发表评论 取消回复