国内网站空间推荐,设计师网上接单的平台,网站免费观影怎么做,广州建设水务局网站概述
在访问某些网站的时候#xff0c;第一次进去你会发现有个操作指引#xff0c;本文引用driver.js#xff0c;教你在你的页面也加入这般高大上的操作指引。
实现效果 实现
driver.js简介
driver.js是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库…概述
在访问某些网站的时候第一次进去你会发现有个操作指引本文引用driver.js教你在你的页面也加入这般高大上的操作指引。
实现效果 实现
driver.js简介
driver.js是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库。它没有依赖项支持所有主要浏览器。
官网地址https://kamranahmed.info/driver.js配置项 https://driverjs.com/docs/configurationAPIhttps://driverjs.com/docs/api
安装
可通过NPM的方式引入。
npm i driver.js
// 或者
yarn add driver.js或者CDN的方式引入
script srchttps://unpkg.com/driver.js/dist/driver.min.js/script
link relstylesheet hrefhttps://unpkg.com/driver.js/dist/driver.min.css特性 **简单**简单易用完全没有外部依赖 高度可定制有一个强大的api可以用于你希望突出显示任何内容 高亮显示页面功能介绍上的任意元素(字面上的任意) 功能介绍为你的web应用程序创建强大的功能介绍 焦点移位器为用户友好添加焦点移位器 用户友好通过键盘行为控制一切 一致行为所有浏览器(包括著名的IE)都可以使用 MIT声明免费用于个人和商业用途。
实现
高亮
const driverObj driver({popoverClass: my-custom-popover-class,
});
driverObj.highlight({element: .form-start-position,popover: {title: 起点,description: p输入起点关键词选择正确的起点/p,},
});操作指引
const tipsKey page-tips;
if (localStorage.getItem(tipsKey)) return;
const stepsData [{element: .form-start-position,popover: {title: 起点,description: p输入起点关键词选择正确的起点/p,side: bottom,align: center,},},{element: .form-end-position,popover: {title: 终点,description: p输入终点关键词选择正确的终点/p,side: bottom,align: center,},},{element: .query-button,popover: {title: 查询,description: p点击查询按钮开始查询规划路径并在地图上展示/p,side: bottom,align: center,},},{element: .map-button,popover: {title: 地图,description: p展示地图和路径规划/p,side: bottom,align: center,},},
];
const driverObj driver({popoverClass: my-custom-popover-class,overlayColor: #000000,overlayOpacity: 0.5,prevBtnText: 上一提示,nextBtnText: 下一提示,doneBtnText: 知道了,closeBtnText: 关闭,showProgress: true,progressText: {{current}}/{{total}},allowClose: true,stageRadius: 4,stagePadding: 10,popoverOffset: 10,onDestroyed: (ele) {localStorage.setItem(tipsKey, true);},steps: stepsData,
});
driverObj.drive();自定义样式
.my-custom-popover-class {background-color: rgba(1, 122, 242, 0.8);color: #fff;.driver-popover-arrow-side-top {border-top-color: rgba(1, 122, 242, 0.8);}.driver-popover-arrow-side-bottom {border-bottom-color: rgba(1, 122, 242, 0.8);}.driver-popover-arrow-side-left {border-left-color: rgba(1, 122, 242, 0.8);}.driver-popover-arrow-side-right {border-right-color: rgba(1, 122, 242, 0.8);}.driver-popover-progress-text,.driver-popover-close-btn {color: #fff;}.driver-popover-prev-btn,.driver-popover-next-btn {border: 1px solid #fff;color: rgba(1, 122, 242, 1);}
}
