jq页面提示或者页面牵引浏览--页面的指引向导插件
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页面提示或者页面牵引浏览--页面的指引向导插件的更多相关文章
- ASP.NET之AdRotator实现淘宝浏览页面的商品随机推荐功能
如今随便上个网都能够看到淘宝.京东等各大电商平台的双十一购物狂欢宣传,从2009年開始淘宝愣是把11.11这一天打造成了全民购物狂欢节.阿里巴巴的上市更是激发了阿里人的斗志,据说他们今年的目标是100 ...
- PHP页面提示与跳转
<?php function message($msgTitle,$message,$jumpUrl){ $str = '<!DOCTYPE HTML>'; $str .= '< ...
- 利用HTML5判断用户是否正在浏览页面技巧
现在,HTML5里页面可见性接口就提供给了程序员一个方法,让他们使用visibilitychange页面事件来判断当前页面可见性的状态,并针对性的执行某些任务.同时还有新的document.hidde ...
- Asp.net MVC Form认证,IIS改成集成模式后,FormsAuthentication.SetAuthCookie无效,Request.IsAuthenticated值,始终为false,页面提示HTTP 错误 401.0 - Unauthorized,您无权查看此目录或页面
最近公司领导要求,IIS网站要由经典模式改为集成模式,以提高性能.改完之后,登录成功跳转到主页之后,页面提示“”HTTP 错误 401.0 - Unauthorized“,“您无权查看此目录或页面”, ...
- mui 页面提示:Unable to preventDefault inside passive
页面提示: 点击该事件:页面提示:[8mui.min.js:7 [Intervention] Unable to preventDefault inside passive event listene ...
- python+selenium 元素被定位到而且click()也提示执行成功,但是页面就是没有变化和跳转。
python+selenium 元素被定位到而且click()也提示执行成功,但是页面就是没有变化和跳转. 如果多次定位和click(),有时候会跳转. 我遇到很多次就是很郁闷,有人说,操作太快的,页 ...
- chrome浏览页面常用快捷键
1.chrome浏览页面常用快捷键 Ctrl+N 打开新窗口. Ctrl+T 打开新标签页. Ctrl+W关闭当前标签 Ctrl + F4 关闭chrome浏览器 Ctrl+Tab 或 Ctrl+Pg ...
- 20160419—JS备忘:服务器回发刷新页面提示重试的解决方案。
有事页面刷新时 提示如下: js使用的是:location.reload()的刷新方式. 使用js重新定向该页面:location.href="a.aspx"; 当使用:self. ...
- [web前端] react router4.0 登录后返回之前浏览页面(回到来源页)
本文链接:https://blog.csdn.net/zeroyulong/article/details/81911704困扰了好久的问题,最终还是在官方文档上找到了答案(看英文文档真心难受啊~~) ...
随机推荐
- F - System Overload(约瑟夫环变形)
Description Recently you must have experienced that when too many people use the BBS simultaneously, ...
- 数据传递-------@ModelAttribute
package com.wh.handler; /** * @ModelAttribute绑定请求参数到命令对象 * @ModelAttribute一个具有如下三个作用: * * ①绑定请求参数到命令 ...
- 使用JS分页 <span> beta 3.0 完成封装的分页
<html> <head> <title>分页</title> <style> #titleDiv{ width:500px; backgr ...
- scala学习笔记2:面向对象编程部分基础
以下主要记录的是看完scala in programming这本书Functional Objects(第六章)后的要点总结. 1,程序中可变对象(var)和不可变对象(val)使用的权衡问题 不可变 ...
- 构建一个.net的干货类库,以便于快速的开发 - 前言
前言: 工作已经快两年了,项目也做过不少,不知道大家有没有一个习惯,就是把在做项目过程中那些好的方法记录下来.我觉得这个习惯在开发的过程中还是很有用的,举个例子,我之前做过一个支付宝的支付功能,然后把 ...
- Java 8 (7) 重构、测试和调试
为改善可读性和灵活性重构代码 看到这里我们已经可以使用lambda和stream API来使代码更简洁,用在新项目上.但大多数并不是全新的项目,而是对现有代码的重构,让它变的更简洁可读,更灵活. 改善 ...
- Android Camera 3D效果
一.概念 在Android中要想实现3D效果,第一个想到的应该就是OpenGL ES,因为在很多基础教材中几乎都提到了它.但是其使用起来还是稍微麻烦一些,而且它也主要用在游戏方面,那在应用方面有没有更 ...
- RabbitMQ 为什么需要信道?为什么不是TCP直接通信?
交换器和队列的关系 1. 交换器是通过路由键和队列绑定在一起的,如果消息拥有的“路由键”跟队列和交换器的“路由键”匹配,那么消息就会被路由到该绑定的队列当中去 2. 也就是说,消息到队列的过程中,消息 ...
- 5步上手体验kettle快捷调度方式
https://my.oschina.net/u/944575/blog/1557410 kettle调度监控最佳实践 https://my.oschina.net/u/1026947/blog/15 ...
- 获取WebBrowser全cookie 和 httpWebRequest 异步获取页面数据
获取WebBrowser全cookie [DllImport("wininet.dll", CharSet = CharSet.Auto, SetLastError = true) ...