jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)


Posted in jQuery onMay 20, 2017

一、有请jquery.guide.js

网站上线或者改版的时候,常常会做一个操作向导,告诉用户一些重要操作到了哪里,或者什么地方隐藏了什么好玩的东西,等等,虽然我都是直接关掉的,或者快速跳过,但是对有部分用户而言还是很有用的。

这种提示比较好的交互效果是采用镂空的半透明遮罩,视觉重点一目了然,类似这样:

我在去年的时候曾经写了一篇文章,名为“ 腾讯微云黑色遮罩引导蒙版更好的CSS实现方式 ”,介绍如何使用单标签,实现类似的交互效果,其中,核心技巧是使用了CSS border 属性,也就是周围的黑色半透明遮罩实际上是半透明边框。

后来我发现了一种更好的实现方式,就是使用CSS outline 属性, outline 属性为元素的轮廓,并不会增加任何元素的尺寸,也不会破坏原先的布局,因此我们只需要设一个非常非常大的 outline 宽度值,我们定位元素就永远天然镂空,根本不需要计算上下左右的半透明黑色区有多大。

.guide {
  outline: 9999px solid rgba(0,0,0,.75);
}

最近正好有个改版项目有类似的需求,我要基于这个原理顺便整了一个jQuery插件,名为jquery.guide.js,专门用来实现黑色半透明遮罩镂空提示引导效果。

实例demo地址: demo地址戳这里

二、jquery.guide.js小插件的优势

jquery.guide.js 小插件的优势如下:

1.使用方便,直接引入JS就好了,无需引入CSS资源;
2.支持浏览器的滚动以及缩放的重定位;
3.支持浏览器键盘操作,如上下键和左右键上一步下一步,ESC键退出等;
4.支持页面异步呈现的元素的引导;
5.内置是否提示检测,也就是内置只会提示一次的处理,基于localStorage进行首次判断;
6.兼容到IE8浏览器;

然后,一些偷懒的地方:

1. 默认是使用 outline 属性实现的,因此不支持圆角,如果你想实现类似下图的效果:

jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐) 

则可以使用CSS box-shadow 属性模拟半透明遮罩效果,在 jquery.guide.js 源代码中,其实已经给大家都准备好了,如下图:

jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐) 

正如源代码中的注释所言,如果想支持圆角,注释上面的 outline ,放开下面两行 box-shadow 和 border-radius 的注释就可以了。

.guide {
  box-shadow: 0 0 0 9999px rgba(0,0,0,.75);
  border-radius: 50%;
}

其中 box-shadow: 0 0 0 9999px 表示原地阴影扩展 9999px 的意思,再用户看来,就是一个满屏黑色半透明的遮罩。

至于不支持CSS3 box-shadow 和 border-radius 的IE8浏览器还是 outline 直角效果。

2.z-index 层级以及半透明遮罩层的透明度都没有作为参数放开,因为新手引导提示基本都是一次性的,如果大家觉得 z-index 层级或者 opacity 透明度不满意,直接修改JS源代码即可。

三、jquery.guide.js小插件的语法和使用

语法如下:

$.guide(options);

其中, options 为数组,数组项为格式一致的包含提示信息相关参数的对象,这个对象统一的默认值为:

var defaults = {
  selector: '', 
  content: '', 
  align: 'center',
  offset: {
    x: 0,
    y: 0
  }
};

使用时候类似这样:

$.guide([{
  selector: '#target'
}]);

其中:

•selector 表示需要镂空暴露的目标元素的选择器,如果该选择器可以匹配多个元素,则使用该选择去匹配的第一个元素作为目标元素;如果无法匹配元素,则整个这个参数对象会被忽略。
•content 表示镂空区域内额外显示的内容,可以是HTML字符串,也可以是jQuery包装器对象。
•align 表示显示内容的对齐方式,是左对齐居中对齐还是右对齐?可选关键字值包括: left , center , right . 其中 center 是默认值。
•offset 表示偏移的水平垂直距离, x 那是水平偏移位置,计算规则与 align 参数值有关, y 表示垂直偏移距离,其中 content 提示内容默认不是顶对齐,而是相对于镂空暴露的目标元素下边缘往上 5 像素对齐。

眼见为实,demo页面走起,您可以狠狠地点击这里: jQuery小插件jquery.guide.js使用demo

demo页面共设置了 4 个提示元素,相关JS使用如下:

<script src="./jquery.min.js"></script>
<script src="./jquery.guide.js"></script>
<script>
$.guide([{
  selector: '.logo',
  content: '<img src="guide-1.png">',
  align: 'left'
}, {
  selector: '.ad img',
  content: '<img src="guide-2.png">'
}, {
  selector: '#back',
  content: '<img src="guide-3.png">',
  align: 'left'
}, {
  selector: '.demo img',
  content: '<img src="guide-4.png">'
}]);
</script>

本demo页面为了演示方便,做了特殊处理,每次刷新都会显示提示效果。实际使用的时候是不会有这样的问题的,只会显示一次,无需担心。

jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐) 

四、结束语

并不是什么了不起的东西,就不放在github上了,如果大家有幸捧场使用,遇到什么问题,欢迎评论的形式进行反馈。

jQuery 相关文章推荐
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 #jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 #jQuery
jQuery操作之效果详解
May 19 #jQuery
jQuery Validate 校验多个相同name的方法
May 18 #jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 #jQuery
jQuery查找dom的几种方法效率详解
May 17 #jQuery
jQuery实现div跟随鼠标移动
Aug 20 #jQuery
You might like
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
php判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
[01:10:24]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第一场 2月28日
2021/03/11 DOTA
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
python实现最长公共子序列
2018/05/22 Python
python3实现弹弹球小游戏
2019/11/25 Python
Python:slice与indices的用法
2019/11/25 Python
使用Django清空数据库并重新生成
2020/04/03 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
美国浴缸、水槽和水龙头购物网站:Vintage Tub & Bath
2019/11/05 全球购物
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
采购类个人求职的自我评价
2014/02/18 职场文书
毕业设计论文评语
2014/12/31 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery