/*!
* by zhangxinxu(.com) 2017-05-18
* 新版上线时候的黑色半透明镂空遮罩指引效果实现jQuery小插件
* 兼容到IE8+
* MIT使用协议,使用时候保留版权
* 更多原理和使用说明参见:http://www.zhangxinxu.com/wordpress/?p=6171
*/ $.guide = function (options) {
var defaults = {
selector: '', // 页面提示元素选择器物,会使用匹配的第一个元素
content: '', // 提示内容可是是字符串,也可以是jQuery包装器对象
align: 'center', // center, right,
offset: {
x: 0,
y: 0
}
};
// options格式
/* [{
selector: '',
content: '',
align: 'left',
offset: {
x: 0,
y: 0
}
}] */ var urlRoot = location.href.split('#')[0].replace(/\W/g, '') + 'Guide'; // 如果要调试,最后的== '1'改成'2'就好了
if (!window.localStorage || !options || !$.isArray(options) || localStorage[urlRoot] == '1') {
return;
} // 创建层
var elGuideOverlay = $('#guideOverlay');
var elGuideShut = $('#guideShut');
var elGuide = $('#guideOverlap'); var start = 0; var remove = function () {
elGuideOverlay.remove();
elGuideShut.remove();
elGuide.remove();
// 键盘事件移除
$(document).off('keydown.guide');
$(window).off('resize.guide');
};
var goto = function (change) {
start = start + change;
if (start < 0) {
start = 0;
}
if (!options[start]) {
remove();
return;
} var data = $.extend({}, defaults, options[start]); // 获取元素
var elTrigger = $(data.selector).eq(0);
if (elTrigger.length == 0 && change) {
goto(change);
return;
} // 装载对应提示内容
elGuide.empty(); var elGuideContent = $('<div></div>').css({
display: 'none',
position: 'absolute'
}).append(data.content); elGuide.append(elGuideContent); // 定位
elGuide.css({
width: elTrigger.outerWidth(),
height: elTrigger.outerHeight(),
left: elTrigger.offset().left,
top: elTrigger.offset().top
}); // 提示内容定位
elGuideContent.css({
top: elTrigger.outerHeight() - 5 + data.offset.y
}); if (data.align == 'left') {
elGuideContent.css({
left: data.offset.x
});
} else if (data.align == 'right') {
elGuideContent.css({
right: data.offset.x
});
} else {
elGuideContent.css({
left: (elTrigger.outerWidth() - elGuideContent.width()) / 2 + data.offset.x
});
} setTimeout(function () {
elGuideContent.show();
}, history.pushState? 100: 0);
}; if (!elGuideOverlay.length) {
elGuideOverlay = $('<a id="guideOverlay" href="javascript:" role="button"></a>').css({
position: 'fixed',
left: 0,
top: 0,
right: 0,
bottom: 0,
background: 'url(about:blank)',
zIndex: 99,
outline: 'none'
}); if (history.pushState) {
elGuideOverlay.css('background', 'linear-gradient(to top, transparent, transparent)');
} elGuideShut = $('<a href="javascript:" id="guideShut" role="button">关闭</a>').css({
position: 'fixed',
top: 10,
right: 10,
color: '#fff',
zIndex: 100
});; elGuide = $('<div id="guideOverlap"></div>').css({
position: 'absolute',
transition: 'all .3s',
boxShadow: '0 0 0 9999px rgba(0,0,0,.75)',
// 如果想支持圆角,下面的注释
// borderRadius: '50%',
zIndex: 100
}); if (![].map) {
// IE8浏览器
elGuide.css('outline', '9999px solid #000').css('filter', 'alpha(opacity=75)');
} $(document.body).append(elGuideOverlay).append(elGuide).append(elGuideShut); // 事件
elGuideShut.on('click', function () {
remove();
}); // 翻页
elGuideOverlay.on({
click: function () {
goto(1);
}
}); $(document).on('keydown.guide', function (event) {
var keycode = {
37: 'left',
38: 'up',
39: 'right',
40: 'down',
27: 'esc'
}; switch (keycode[event.keyCode]) {
case 'esc': {
remove();
break;
}
case 'up': case 'left': {
goto(-1);
event.preventDefault();
break;
}
case 'right': case 'down': {
goto(1);
event.preventDefault();
break;
}
}
}); $(window).on('resize.guide', function () {
goto(0);
});
} goto(0); elGuideOverlay[0].focus(); localStorage[urlRoot] = '1';
};

  

黑色半透明镂空遮罩指引效果实现jQuery小插件的更多相关文章

  1. 基于HTML5 audio元素播放声音jQuery小插件

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1609 一.前面的些唠 ...

  2. 自己写的自动生成动态边框的jquery小插件

    思路就是在元素四周添加<ul>列表,然后周期性地改变它的颜色,实现动态的效果,不支持ie7.ie8 预览链接http://gorey.sinaapp.com/myBorder/border ...

  3. 一款jquery小插件:实现轻松获取和绑定编辑表单的值(带源码)

    实现目的:通常在项目中,编辑页面在前后台需要一个一个框赋值,取值操作,小伙伴们普遍都会感觉繁琐,麻烦.: 实现思路:利用json对象化键值的思想: 好处:方便快速开发,提高开发效率,减少重复性代码: ...

  4. jquery 小插件,完成“输入字段预期值的提示信息”,防html5 placeholder属性

    前言:在很多时候,我们需要文本框中显示默认值,获取焦点时,文字框中就会清空给的值,当失去焦点时,如果没有值,继续显示默认的文字,如果有输入值,就显示输入的值.现在项目中需要用到这个地方的功能比较多,于 ...

  5. 学习写了一个点击按钮倒计时的jquery小插件

    (function($) { $.fn.extend({ getSms: function(value) { value = $.extend({ wait: 60, //参数, 默认60秒 }, v ...

  6. 文本框/域文字提示(placeholder)自动显示隐藏jQuery小插件

    // 文本框文本域提示文字的自动显示与隐藏 (function($){ $.fn.textRemindAuto = function(options){ options = options || {} ...

  7. 20 个用于处理页面滚动效果的 jQuery 插件

    对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性.如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果.幸运的是有各种各样的jquery 滚动插件可供他们使用, ...

  8. 有用的jQuery布局插件推荐

    网页设计中排版也是很重要的,但有些比较难的网页排版我们可以用一些jQuery来实现,今天文章中主要分享一些有用的jQuery布局插件,有类似Pinterest流布局插件.友荐的滑动提示块以及其它jQu ...

  9. jquery图片放大镜和遮罩层效果

    图片放大镜效果将借助于jqzoom插件,遮罩层借助于thickbox插件. 1.引入样式表 /*整体样式*/ <link rel="stylesheet" href=&quo ...

随机推荐

  1. Linux自动人机交互expect

    exp_test.sh文件 #!/bin/bash/expect ## exp_test.sh set timeout -; spawn ssh localhost; expect { "( ...

  2. Expm 10_1 带负权值边的有向图中的最短路径问题

    [问题描述] 对于一个带负权值边的有向图,实现Bellman-Ford算法,求出从指定顶点s到其余顶点的最短路径,并判断图中是否存在负环. package org.xiu68.exp.exp10; p ...

  3. 帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)

    作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...

  4. MySQL笔记二

    Ø function 函数 函数的作用比较大,一般多用在select查询语句和where条件语句之后.按照函数返回的结果, 可以分为:多行函数和单行函数:所谓的单行函数就是将每条数据进行独立的计算,然 ...

  5. 清北学堂 清北-Day3-R2-打架 (fight)

    题目描述 LYK有 \(n\) 个小朋友排成一排.第 \(i\) 个小朋友的战斗力是 $ a_i $,且他们的战斗力互不相同. 战斗力高的会打败战斗力低的. LYK想恶搞这些小朋友们,具体地,它有 \ ...

  6. 清北学堂 清北-Day5-R2-xor

    有 $ n $ 个物品,每个物品有两个属性 $ a_i,b_i $ ,挑选出若干物品,使得这些物品 $ a_i $ 的异或和 $ x \le m \(.问在这一限制下,\) b_i $ 的总和最大可能 ...

  7. swift 学习- 12 -- 方法

    // 方法 是与某些特定类型相关的函数.  类, 结构体,枚举 都可以定义实例方法, 实例方法为给类型的实例封装了具体的任务与功能.  类, 结构体, 枚举 也可以定义类型方法,  类型方法与类型本身 ...

  8. L1和L2正则

    https://blog.csdn.net/jinping_shi/article/details/52433975

  9. Socket通讯成功案例

    Socket通讯案例 #region 服务端 //int port = 1234; //string host = "127.0.0.1"; //IPAddress ip = IP ...

  10. Confluence 6 推荐的更新通知设置和禁用

    你可以设置默认的发送选项(发送 / 不发送)和默认的发送时间(每天或每周). 如何配置推荐更新电子邮件通知: 在屏幕的右上角单击 控制台按钮 ,然后选择 General Configuration 链 ...