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困扰了好久的问题,最终还是在官方文档上找到了答案(看英文文档真心难受啊~~) ...
随机推荐
- 题解报告:hdu 1312 Red and Black(简单dfs)
Problem Description There is a rectangular room, covered with square tiles. Each tile is colored eit ...
- tns no listener
ip 应该为192.168 实际上是 196.168
- java项目怎么打jar包(项目中包含第三方jar包)
1,右键选中项目,点击Export导出,找到java,选择第三个Runnable JAR file, 2,在Launch configuration中,填入程序的入口(有main方法的类), 然后 ...
- P2668 斗地主 dp+深搜版
题目描述 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的A到K加上大小王的共54张牌来进行的扑克牌游戏.在斗地主中,牌的大小关系根据牌的数码表示如下:3<4< ...
- Android 百度地图 android.view.InflateException: Binary XML file line Error inflating class com.baidu.mapapi.map.MapView
android.view.InflateException: Binary XML file line Error inflating class com.baidu.mapapi.map.MapVi ...
- hexo博客域名重复提交问题
之前电脑重装系统,导致我的博客也忘记备份了.呜呜 期间试过hexo的next主题,虽然很好看,但是一直出问题,最终又恢复到了原来的主题,还是原来的配方,还是原来的味道 记录: 一.加载域名管理器 二. ...
- 【Android开发】XML文件解析
最近在做一个项目,涉及到XML文件的解析,废话不多说,如下: 读取 private ArrayList<Data> readXMLLocked() { File file = new Fi ...
- 解决:未能加载文件或程序集“System.Web.Http, Version=5.2.4.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35”或它的某一个依赖项。找到的程序集清单定义与程序集引用不匹配。 (异常来自 HRESULT:0x80131040)
今天发布web API,调用接口报错了:未能加载文件或程序集“System.Web.Http, Version=5.2.4.0, Culture=neutral, PublicKeyToken=31b ...
- CUDA 显存操作:CUDA支持的C++11
CUDA9的编译器和语言改进 使用CUDA 9,nvcc编译器增加了对C ++ 14的支持,其中包括新功能 通用的lambda表达式,其中使用auto关键字代替参数类型; auto lambda = ...
- 个人觉得比较好用的chrome插件
印象笔记·悦读 "悦读"可使博文.文章和网页变得简明而又易于阅读.将其保存至印象笔记以便随时随地阅读. Anything to QRcode 通过右键菜单或地址栏按钮将当前页面地址 ...