mgGlitch.js 是一款能够模拟显示器故障效果的 jQuery 插件。mgGlitch.js 能够为页面中的任何元素制作错屏效果,就像显示器发生故障时的画面在闪动的效果。
在页面中引入 jquery 和 mgGlitch.js 文件。
<script src="path/to/jquery.min.js"></script>
<script src="path/to/mgGlitch.js"></script>
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 属性
Github 地址:https://github.com/hmongouachon/mgGlitch
演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!
要发表评论,您必须先登录。
Demo的图莫名感觉害怕哈哈哈
哈哈,确实是有点,非常感谢您关注本站!