1.看看插件效果吧

2. html 文件 ：index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="./jquery-1.12.4.min.js"></script>
  7.     <script src="./guideTips.js"></script>
  8.     <style>
  9.         ul{position: relative;padding: 0 -3px;list-style: none;width: 600px;margin: 0 auto;box-sizing: border-box}
  10.         li{float: left;width: 33.33%;padding: 20px;box-sizing: border-box}
  11.         li img{width: 100%;height: 100%;}
  12.     </style>
  13. </head>
  14. <body style="position: absolute;width: 100%;height: 100%;margin: 0">
  15. <p  style="margin: 50px;text-align: center">
  16.     <span class="header-option-save" style="background: #fff;">第二个位置</span>
  17. </p>
  18. <p style="margin: 50px;text-align: center">
  19.     <input id="datepicker"  type="text" value="">
  20. </p>
  21. <ul class="flowLayout-box">
  22.     <li class="flowLayout-item"> <img id="testimg" class="flowLayout-pic" src="./img/u17.png" alt=""></li>
  23.     <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u19.png" alt=""></li>
  24.     <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u114.png" alt=""></li>
  25.     <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u116.png" alt=""></li>
  26.     <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u118.png" alt=""></li>
  27.     <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u120.png" alt=""></li>
  28.     <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u132.png" alt=""></li>
  29.     <div style="clear: both"></div>
  30. </ul>
  31.  
  32. </body>
  33. </html>

　　

3.引入插件

插件地址： http://files.cnblogs.com/files/jiebba/guideTsips.js

4.调用：

  1. $(function () {
  2.         var option = {
  3.             list:[
  4.                 {obj:$('#testimg'),msgW:300,msg:'第一个位置，可以点击这张图片来浏览，可以下载这张图破',img:2},      //第一个位置对象
  5.                 {obj:$('.header-option-save'),msgW:300,msg:'第二个位置，这是整个页面的标题，来看看吧',img:3},　　　//第二个位置对象
  6.                 {obj:$('#datepicker'),msgW:300,msg:'第三个位置，这里可以搜索图片，输入你要搜索的关键词吧',img:2}
  7.             ],
  8.             img:{url:'./img/tips-arrow.png',width:'52.5px',height:'48px'}
  9.         }
  10.         var g = new GuideTips(option)
  11.     })
    　　
  1. /*
    * img 图片url   方向图标
    * list{  提示对象列表
    * obj   提示对象
    * msgW  提示文字宽度
    * msg   提示文字
    * img   1:指向右下，2：指向左上，3：指向右上，default :指向左下
    * }
    * */

　　

    img  图片

可以查看效果了！

代码仅供参考，具体功能可以自己扩展。

个人博客 ：很多好用的 npm 包 ， 可以看看 https://gilea.cn/　

http://www.cnblogs.com/jiebba    我的博客，来看吧！

jq页面提示或者页面牵引浏览--页面的指引向导插件的更多相关文章

  1. ASP.NET之AdRotator实现淘宝浏览页面的商品随机推荐功能

    如今随便上个网都能够看到淘宝.京东等各大电商平台的双十一购物狂欢宣传,从2009年開始淘宝愣是把11.11这一天打造成了全民购物狂欢节.阿里巴巴的上市更是激发了阿里人的斗志,据说他们今年的目标是100 ...

  2. PHP页面提示与跳转

    <?php function message($msgTitle,$message,$jumpUrl){ $str = '<!DOCTYPE HTML>'; $str .= '< ...

  3. 利用HTML5判断用户是否正在浏览页面技巧

    现在,HTML5里页面可见性接口就提供给了程序员一个方法,让他们使用visibilitychange页面事件来判断当前页面可见性的状态,并针对性的执行某些任务.同时还有新的document.hidde ...

  4. Asp.net MVC Form认证，IIS改成集成模式后，FormsAuthentication.SetAuthCookie无效，Request.IsAuthenticated值，始终为false，页面提示HTTP 错误 401.0 - Unauthorized，您无权查看此目录或页面

    最近公司领导要求,IIS网站要由经典模式改为集成模式,以提高性能.改完之后,登录成功跳转到主页之后,页面提示“”HTTP 错误 401.0 - Unauthorized“,“您无权查看此目录或页面”, ...

  5. mui 页面提示：Unable to preventDefault inside passive

    页面提示: 点击该事件:页面提示:[8mui.min.js:7 [Intervention] Unable to preventDefault inside passive event listene ...

  6. python+selenium 元素被定位到而且click()也提示执行成功，但是页面就是没有变化和跳转。

    python+selenium 元素被定位到而且click()也提示执行成功,但是页面就是没有变化和跳转. 如果多次定位和click(),有时候会跳转. 我遇到很多次就是很郁闷,有人说,操作太快的,页 ...

  7. chrome浏览页面常用快捷键

    1.chrome浏览页面常用快捷键 Ctrl+N 打开新窗口. Ctrl+T 打开新标签页. Ctrl+W关闭当前标签 Ctrl + F4 关闭chrome浏览器 Ctrl+Tab 或 Ctrl+Pg ...

  8. 20160419—JS备忘：服务器回发刷新页面提示重试的解决方案。

    有事页面刷新时 提示如下: js使用的是:location.reload()的刷新方式. 使用js重新定向该页面:location.href="a.aspx"; 当使用:self. ...

  9. [web前端] react router4.0 登录后返回之前浏览页面（回到来源页）

    本文链接:https://blog.csdn.net/zeroyulong/article/details/81911704困扰了好久的问题,最终还是在官方文档上找到了答案(看英文文档真心难受啊~~) ...

随机推荐

  1. HTML基础2——综合案例3——创建考试报名表格

    <html> <head> <title></title> </head> <body> <table width=&qu ...

  2. python2行代码调用程序

    import win32api win32api.ShellExecute(0, 'open', r'C:\Users\TOPFEEL\AppData\Local\Postman\app-5.5.0\ ...

  3. [ ZJOI 2010 ] 网络扩容

    \(\\\) Description 给定一张有向图,每条边都有一个容量 \(C\) 和一个扩容费用 \(W\). 这里扩容费用是指将容量扩大 \(1\) 所需的费用.求: 在不扩容的情况下, \(1 ...

  4. 读《实战GUI产品的自动化测试》：第一步——了解自动化测试，简单RFT的录制回放实例

    1.了解自动化测试,什么是自动化测试?(可以参数百度百科“自动化测试”) 2.了解自动化测试 * 自动化测试如何改善产品的质量 * 自动化测试无法完全替代手工测试 * 自动化测试无法发现新的问题——适 ...

  5. Farseer.net轻量级开源框架 中级篇：自定义配置文件

    导航 目   录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 中级篇: 数据绑定 下一篇:Farseer.net轻量级开源框架 中级篇: 动态数据库访问 ...

  6. 328.io流（字符串-练习-复制文本文件一）

    public static void main(String[] args) { // TODO Auto-generated method stub FileReader fr = null; Fi ...

  7. 《网络管理》IP地址管理与子网划分

    IP地址管理——ipmaster ipmaster是一款对IP地址进行管理的软件,使用该软件可以提高网络管理员的工作效率.在大型网络中,使用该软件可以有序且高效地实现大中小型企业网IP地址的分配和管理 ...

  8. R语言学习 - 线图一步法

    首先把测试数据存储到文件中方便调用.数据矩阵存储在line_data.xls和line_data_melt.xls文件中 (直接拷贝到文件中也可以,这里这么操作只是为了随文章提供个测试文件,方便使用. ...

  9. 从整体上理解进程创建、可执行文件的加载和进程执行进程切换，重点理解分析fork、execve和进程切换

    学号后三位<168> 原创作品转载请注明出处https://github.com/mengning/linuxkernel/ 1.分析fork函数对应的内核处理过程sys_clone,理解 ...

  10. vue学习总结(简单介绍)

    声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: <div id="app"> {{ message }} < ...