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中的deferred对象和extend方法详解
May 08 jQuery
jQuery实现的简单在线计算器功能
May 11 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jQuery实现简单QQ聊天框
Aug 27 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中使用与Perl兼容的正则表达式
2006/11/26 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
php 文章调用类代码
2011/08/11 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
jQuery 获取对象 定位子对象
2010/05/31 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现多线程采集的2个代码例子
2014/07/07 Python
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
python format 格式化输出方法
2018/07/16 Python
学生信息管理系统python版
2018/10/17 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
通用C#笔试题附答案
2016/11/26 面试题
酒店总经理助理岗位职责
2014/02/01 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
公司地址变更通知
2015/04/25 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
python对文档中元素删除,替换操作
2022/04/02 Python
Android 中的类文件和类加载器详情
2022/06/05 Java/Android