1.看看插件效果吧

2. html 文件 ：index.html
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="./jquery-1.12.4.min.js"></script>

    <script src="./guideTips.js"></script>

    <style>

        ul{position: relative;padding: 0 -3px;list-style: none;width: 600px;margin: 0 auto;box-sizing: border-box}

        li{float: left;width: 33.33%;padding: 20px;box-sizing: border-box}

        li img{width: 100%;height: 100%;}

    </style>

</head>

<body style="position: absolute;width: 100%;height: 100%;margin: 0">

<p  style="margin: 50px;text-align: center">

    <span class="header-option-save" style="background: #fff;">第二个位置</span>

</p>

<p style="margin: 50px;text-align: center">

    <input id="datepicker"  type="text" value="">

</p>

<ul class="flowLayout-box">

    <li class="flowLayout-item"> <img id="testimg" class="flowLayout-pic" src="./img/u17.png" alt=""></li>

    <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u19.png" alt=""></li>

    <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u114.png" alt=""></li>

    <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u116.png" alt=""></li>

    <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u118.png" alt=""></li>

    <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u120.png" alt=""></li>

    <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u132.png" alt=""></li>

    <div style="clear: both"></div>

</ul>

</body>

</html>

　　

3.引入插件

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

4.调用：

$(function () {

        var option = {

            list:[

                {obj:$('#testimg'),msgW:300,msg:'第一个位置，可以点击这张图片来浏览，可以下载这张图破',img:2},      //第一个位置对象

                {obj:$('.header-option-save'),msgW:300,msg:'第二个位置，这是整个页面的标题，来看看吧',img:3},　　　//第二个位置对象

                {obj:$('#datepicker'),msgW:300,msg:'第三个位置，这里可以搜索图片，输入你要搜索的关键词吧',img:2}

            ],

            img:{url:'./img/tips-arrow.png',width:'52.5px',height:'48px'}

        }

        var g = new GuideTips(option)

    })
　　
/*
* 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. lua调用java java调用lua[转载]

    转载:http://dualface.github.io/blog/2013/01/01/call-java-from-lua/LuaJavaBridge - Lua 与 Java 互操作的简单解决方 ...

  2. node-rsa加密，java解密调试

    用NODE RSA JS 加密解密正常,用JAVA RSAUtils工具类加密解密正常.但是用node加密玩的java解密不了.原因:node默认的是 DEFAULT_ENCRYPTION_SCHEM ...

  3. IKanalyzer、ansj_seg、jcseg三种中文分词器的实战较量

    转自:http://lies-joker.iteye.com/blog/2173086 选手:IKanalyzer.ansj_seg.jcseg 硬件:i5-3470 3.2GHz 8GB win7 ...

  4. php函数的定义和声明

    1.函数的定义 函数是一个被命名的独立的代码段,它执行特定任务,并可以给调用它的程序返回值. 2.函数的优点 提高程序的重用性 提高程序的可维护性 可以提高软件的开发效率 提高软件的可靠性 控制程序的 ...

  5. Farseer.net轻量级开源框架 入门篇：使用前说明

    导航 目   录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 入门篇: 框架性能测试 下一篇:Farseer.net轻量级开源框架 入门篇: 增.删.改. ...

  6. vue2.0框架认识

    虚拟dom和声明式渲染: Vue的编译器在编译模板之后,会把这些模板编译成一个渲染函数 .而函数被调用的时候就会渲染并且返回一个 虚拟DOM的树 .这个树非常轻量,它的职责就是描述当前界面所应处的状态 ...

  7. 防止按钮button重复提交，点击后失效，10秒后恢复

    <script type="text/javascript"> $(function () {//页面完全加载完后执行 /*防止重复提交 10秒后恢复*/ var is ...

  8. oracle数据库定时备份

    现有需求,设计一批处理文件,实现周一全部备份,周二周三周五周六增量备份,周四周日累计备份.并且每日将上个月本日数据删除(如今日8月7号,则删除7月7号的数据).并将备份压缩以减小所占空间. 思路: 备 ...

  9. VS2015 安装包缺失(联网安装失败)问题解决

    Win7 x86 测试可行 *  如果前面有尝试过安装不成功, 一定要用卸载程序删除已安装的部分,否则会出乱子. 1. 或者是用虚拟光驱加载ISO, 或者是解压到硬盘上, 都没有关系. 2. 用管理员 ...

  10. 00-IT人士必去的10个网站

    IT人士必去的10个网站 1.Chinaunix 网址:http://www.chinaunix.net/ 简介:中国最大的linux/unix技术社区. 2.ITPub 网址:http://www. ...