黑色半透明镂空遮罩指引效果实现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 ...
随机推荐
- WAV文件有多大?MP3文件有多大?使用Lame 压缩比是多少?
一.说明: 录音文件大小多少?用什么存比较合?我有500G的硬盘存录音能存多久?...... 这些东西常用常忘,索性一次性就分析清楚记下来,方便以后查阅,如果能帮到大家那就更好了. 二.计算方法: ...
- Light OJ 1009
题意: 给你一个二分图, (可能不连通) 求可能多的子集元素个数: 思路: 直接DFS 给二分图染色就有了, 统计联通块中个数, 去最大值相加即可. #include<bits/stdc++.h ...
- VUE (vue-cli)脚手架项目说明
1. 概述 1.1 说明 使用vue-cli快速创建的vue项目目录如下: build -- webpack相关配置以及服务启动文件,配置多依赖于下边的config文件夹中内容 config -- ...
- CSS 三角形与圆形
1. 概述 1.1 说明 通过边框(border)的宽度与边框圆角(border-radius)来设置所需的三角形与圆形. 1.2 边框 宽高都为0时,边框设置的不同结果也不同,如下: 1.四个边框都 ...
- μCUnit,微控制器的单元测试框架
在MCU on Eclipse网站上看到Erich Styger在8月26日发布的博文,一篇关于微控制器单元测试的文章,有很高的参考价值,特将其翻译过来以备学习.原文网址:https://mcuone ...
- Confluence 6 安全概述和建议概述
这个文档是针对 Confluence 的系统管理员希望对 Confluence Web应用程序安全性进行评估而设计的.这个页面将对系统的安全进行大致的描述,同时也会对 Confluence 的安全配置 ...
- Confluence 6 升级自定义的站点和空间仔细测试你的修改
修改可能对 Confluence 的后续版本不兼容,当你对 Confluence 进行升级的时候,你应该总是对你自定义修改的模板文件进行仔细的测试来确定所有的修改对新版本的 Confluence 兼容 ...
- 复习os模块常用的一些操作
import os # 1.切换路径============= d = os.getcwd() #获取当前的工作路径 os.chdir('D:\\')#目录的切换 print(os.getcwd()) ...
- 字符串为空的比较 ==与equals() 区别(キ`゚Д゚´)!!基础很重要 !!!
情况描述:我提交的代码,让老大审批了一次,讲真的,对于我来说受益匪浅,其中有一个印象很深的内容:一个字符串是否为空的判断,我以前敲代码一直都是这样写的,可是从来都没有意识到这个东西. 代码: if(s ...
- HTML&javaSkcript&CSS&jQuery&ajax(八)
一. <!DOCTYPE html><html><head><meta charset="utf-8"><tiitle> ...