图片/图形

mgGlitch 模拟显示故障的jQuery插件

阿里云

mgGlitch.js 是一款能够模拟显示器故障效果的 jQuery 插件。mgGlitch.js 能够为页面中的任何元素制作错屏效果,就像显示器发生故障时的画面在闪动的效果。

使用方法

在页面中引入 jquery 和 mgGlitch.js 文件。

也想出现在这里?联系我们
创客主机
  1. <script src="path/to/jquery.min.js"></script>
  2. <script src="path/to/mgGlitch.js"></script>

HTML 结构

DEMO 中是以背景图片为例子,它的 HTML 结构如下:

  1. <div class="container">
  2.       <div class="glitch-img" style="background-image: url('img/1.jpg"></div>
  3. </div>

初始化插件

在页面 DOM 元素加载完毕之后,通过 mgGlitch()方法来初始化插件。

  1. $( function() {
  2.   $( ".glitch-img" ).mgGlitch({
  3.       destroy : false, // set 'true' to stop the plugin
  4.       glitch: true, // set 'false' to stop glitching
  5.       scale: true, // set 'false' to stop scaling
  6.       blend : true, // set 'false' to stop glitch blending
  7.       blendModeType : 'hue', // select blend mode type
  8.       glitch1TimeMin : 600, // set min time for glitch 1 elem
  9.       glitch1TimeMax : 900, // set max time for glitch 1 elem
  10.       glitch2TimeMin : 10, // set min time for glitch 2 elem
  11.       glitch2TimeMax : 115, // set max time for glitch 2 elem
  12.       zIndexStart : 8, // because of absolute position, set z-index base value
  13.   });
  14. });

配置参数

mgGlitch.js 插件的可用配置参数有:

destroy:是否禁用插件

glitch:设置为 false 停止画面闪动效果

scale:设置为 false 停止缩放

blend:设置为 false 停止混合模式

blendModeType:混合模式的类型

glitch1TimeMin:设置第一个闪动元素的闪动最小时间

glitch1TimeMax:设置第一个闪动元素的闪动最大时间

glitch2TimeMin:设置第二个闪动元素的闪动最小时间

glitch2TimeMax:设置第二个闪动元素的闪动最大时间

zIndexStart:闪动元素必须是绝对定位,通过该参数来设置 z-index 属性
Github 地址:https://github.com/hmongouachon/mgGlitch

mgGlitch 模拟显示故障的 jQuery 插件

已有 495 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

评论:

2 条评论,访客:0 条,博主:0 条
  1. 游客001
    游客001发布于: 

    Demo的图莫名感觉害怕哈哈哈

    • PetitQ
      PetitQ发布于: 

      哈哈,确实是有点,非常感谢您关注本站!

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!