黑色半透明镂空遮罩指引效果实现jQuery小插件
/*!
* 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小插件的更多相关文章
- 基于HTML5 audio元素播放声音jQuery小插件
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1609 一.前面的些唠 ...
- 自己写的自动生成动态边框的jquery小插件
思路就是在元素四周添加<ul>列表,然后周期性地改变它的颜色,实现动态的效果,不支持ie7.ie8 预览链接http://gorey.sinaapp.com/myBorder/border ...
- 一款jquery小插件:实现轻松获取和绑定编辑表单的值(带源码)
实现目的:通常在项目中,编辑页面在前后台需要一个一个框赋值,取值操作,小伙伴们普遍都会感觉繁琐,麻烦.: 实现思路:利用json对象化键值的思想: 好处:方便快速开发,提高开发效率,减少重复性代码: ...
- jquery 小插件,完成“输入字段预期值的提示信息”,防html5 placeholder属性
前言:在很多时候,我们需要文本框中显示默认值,获取焦点时,文字框中就会清空给的值,当失去焦点时,如果没有值,继续显示默认的文字,如果有输入值,就显示输入的值.现在项目中需要用到这个地方的功能比较多,于 ...
- 学习写了一个点击按钮倒计时的jquery小插件
(function($) { $.fn.extend({ getSms: function(value) { value = $.extend({ wait: 60, //参数, 默认60秒 }, v ...
- 文本框/域文字提示(placeholder)自动显示隐藏jQuery小插件
// 文本框文本域提示文字的自动显示与隐藏 (function($){ $.fn.textRemindAuto = function(options){ options = options || {} ...
- 20 个用于处理页面滚动效果的 jQuery 插件
对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性.如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果.幸运的是有各种各样的jquery 滚动插件可供他们使用, ...
- 有用的jQuery布局插件推荐
网页设计中排版也是很重要的,但有些比较难的网页排版我们可以用一些jQuery来实现,今天文章中主要分享一些有用的jQuery布局插件,有类似Pinterest流布局插件.友荐的滑动提示块以及其它jQu ...
- jquery图片放大镜和遮罩层效果
图片放大镜效果将借助于jqzoom插件,遮罩层借助于thickbox插件. 1.引入样式表 /*整体样式*/ <link rel="stylesheet" href=&quo ...
随机推荐
- Git如何克隆远程仓库
1.首先选择一个合适的地方创建一个空目录 mkdir learngit 2.通过git Init命令把这个目录变成git可以管理的仓库,瞬间git就把仓库建好了 3.将编写的文件放到 lear ...
- Bootstrap -- 模态框实现拖拽移动
### 这里实现这个效果 需要引入 jquery-ui.min.js类库 jquery-ui.min.css样式 使用它提供的draggable()方法实现 ### 菜鸟教程 http://www.r ...
- bsdiff的编译与使用
bsdiff是一个差异包比较工具,可以用来实现增量更新. 下载地址:http://www.daemonology.net/bsdiff 编译 Mac环境 版本:macOS 10.12 1.解压下载的b ...
- python基础--管理目录与文件
1) 文件夹 os.listdir() #显示文件夹下所有文件 os.getcwd() #获取当前工作目录 os.chdir() #切换目录 os.mkdir() #建立目录 os.path.exis ...
- python1114string_test
#! -*- coding:utf-8 -*- str = "self_learn"print(type(str))str.title()print(str.title()) # ...
- Modbus库开发笔记之十:利用协议栈开发Mosbus RTU Slave应用
上一节我们使用协议占开发了一个Modbus TCP Server应用.接下来我们使用协议栈在开发一个基于串行链路的Mosbus RTU Slave应用. 根据前面对协议栈的封装,我们需要引用Modbu ...
- Confluence 6 配置 MySQL 服务器
在这一步,你将要配置你的 MySQL 数据库服务器. 注意: 如果你尝试连接你的 Confluence 到一个已经存在的 MySQL 数据库服务器.我们强烈建议你按照下面描述的安装步骤在 MySQL ...
- SSM框架整合篇
目录 SSM整合 框架搭建步骤 SSM整合 Author:SimpleWu github(已上传SSMrest风格简单增删该查实例):https://gitlab.com/450255266/code ...
- Matplotlib模块:绘图和可视化
一.简单介绍Matplotlib 1.Matplotlib是一个强大的Python绘图和数据可视化的工具包 2.安装方法:pip install matplotlib 3.引用方法:import ma ...
- laravel 5 优化
性能一直是 Laravel 框架为人诟病的一个点,所以调优 Laravel 程序算是一个必学的技能. 接下来分享一些开发的最佳实践,还有调优技巧,大家有别的建议也欢迎留言讨论. 这里是简单的列表: 配 ...