扫一扫分享
mgGlitch.js是一款能够模拟显示器故障效果的jquery插件。mgGlitch.js能够为页面中的任何元素制作错屏效果,就像显示器发生故障时的画面在闪动的效果。
1、引入
<script src="path/to/jquery.min.js"></script>
<script src="path/to/mgGlitch.js"></script>
2、html
<div class="container">
<div class="glitch-img" style="background-image: url('img/1.jpg"></div>
</div>
3、初始化
$( 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
});
});
手机预览