mgGlitch.js是一款能够模拟显示器故障效果的jQuery插件。mgGlitch.js能够为页面中的任何元素制作错屏效果,就像显示器发生故障时的画面在闪动的效果。
使用方法
在页面中引入jquery和mgGlitch.js文件。
<script src="path/to/jquery.min.js"></script> <script src="path/to/mgGlitch.js"></script>
HTML结构
DEMO中是以背景图片为例子,它的HTML结构如下:
<div class="container"> <div class="glitch-img" style="background-image: url('img/1.jpg"></div> </div>
初始化插件
在页面DOM元素加载完毕之后,通过mgGlitch()
方法来初始化插件。
$( function() { $( ".glitch-img" ).mgGlitch({ destroy : false, // set 'true' to stop the plugin glitch: true, // set 'false' to stop glitching scale: true, // set 'false' to stop scaling blend : true, // set 'false' to stop glitch blending blendModeType : 'hue', // select blend mode type glitch1TimeMin : 600, // set min time for glitch 1 elem glitch1TimeMax : 900, // set max time for glitch 1 elem glitch2TimeMin : 10, // set min time for glitch 2 elem glitch2TimeMax : 115, // set max time for glitch 2 elem zIndexStart : 8, // because of absolute position, set z-index base value }); });
配置参数
mgGlitch.js插件的可用配置参数有:
-
destroy
:是否禁用插件。 -
glitch
:设置为false停止画面闪动效果。 -
scale
:设置为false停止缩放。 -
blend
:设置为false停止混合模式。 -
blendModeType
:混合模式的类型。 -
glitch1TimeMin
:设置第一个闪动元素的闪动最小时间。 -
glitch1TimeMax
:设置第一个闪动元素的闪动最大时间。 -
glitch2TimeMin
:设置第二个闪动元素的闪动最小时间。 -
glitch2TimeMax
:设置第二个闪动元素的闪动最大时间。 -
zIndexStart
:闪动元素必须是绝对定位,通过该参数来设置z-index属性。
mgGlitch.js模拟显示器故障效果插件的github地址为:https://github.com/hmongouachon/mgGlitch
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!