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解析获取JSON数据
Apr 08 jQuery
使用 jQuery 实现表单验证功能
Jul 05 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jQuery擦除插件eraser使用方法详解
Jan 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
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
开发大型 PHP 项目的方法
2007/01/02 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
深入理解Python中的*重复运算符
2017/10/28 Python
详解python的ORM中Pony用法
2018/02/09 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
Zooplus罗马尼亚:宠物食品和配件
2019/11/02 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
土木工程毕业生自荐信
2013/09/21 职场文书
供应链金融服务方案
2014/05/25 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
国际贸易实训报告
2014/11/05 职场文书
先进员工事迹材料
2014/12/20 职场文书
端午节活动总结报告
2015/02/11 职场文书
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL