最近有个需求想要实现页面引导，让用户知道我们PC端的页面是如何交互的
使用Jquery-pagewalkthroung 这个库在jquery 插件需要金币的，我觉得不划算，因为这个项目本身是开源的
话不多说直接上代码 效果（点击此链接即可查看）
代码语言：javascript
复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery-pagewalkthrough</title>
<script src="./jquery-2.1.1.js"></script>
<link
type="text/css"
rel="stylesheet"
href="../dist/css/jquery.pagewalkthrough.css"
/>
<script
type="text/javascript"
src="../dist/jquery.pagewalkthrough.js"
></script>
<style>
* {
padding: 0px;
margin: 0px;
}
body {
background-color: #141726;
}
.main {
width: 1440px;
height: 738px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.w1,
.w2,
.w3,
.w4 {
position: absolute;
width: 300px;
height: 80px;
top: 120px;
left: 220px;
}
.w2 {
top: 310px;
left: 220px;
width: 600px;
height: 40px;
}
.w3 {
top: 550px;
left: 220px;
width: 380px;
height: 40px;
}
.w4 {
top: 700px;
left: 1240px;
width: 100px;
height: 40px;
}
</style>
</head>
<body>
<div class="main">
<div class="w1"></div>
<div class="w2"></div>
<div id="walkthrough-2">
jQuery插件库LOGO，点击这里可以跳转到网站首页。
</div>
<div class="w3"></div>
<div id="walkthrough-3">第二部演示</div>
<div class="w4"></div>
<div id="walkthrough-4">第三部演示</div>
<img src="img/jq22.jpg" usemap="#Map" />
<div id="walkthrough-5">第四部演示</div>
</div>
<script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery-pagewalkthrough</title>
<script src="./jquery-2.1.1.js"></script>
<link
type="text/css"
rel="stylesheet"
href="../dist/css/jquery.pagewalkthrough.css"
/>
<script
type="text/javascript"
src="../dist/jquery.pagewalkthrough.js"
></script>
<style>
* {
padding: 0px;
margin: 0px;
}
body {
background-color: #141726;
}
.main {
width: 1440px;
height: 738px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.w1,
.w2,
.w3,
.w4 {
position: absolute;
width: 300px;
height: 80px;
top: 120px;
left: 220px;
}
.w2 {
top: 310px;
left: 220px;
width: 600px;
height: 40px;
}
.w3 {
top: 550px;
left: 220px;
width: 380px;
height: 40px;
}
.w4 {
top: 700px;
left: 1240px;
width: 100px;
height: 40px;
}
</style>
</head>
<body>
<div class="main">
<div class="w1"></div>
<div class="w2"></div>
<div id="walkthrough-2">
jQuery插件库LOGO，点击这里可以跳转到网站首页。
</div>
<div class="w3"></div>
<div id="walkthrough-3">第二部演示</div>
<div class="w4"></div>
<div id="walkthrough-4">第三部演示</div>
<img src="img/jq22.jpg" usemap="#Map" />
<div id="walkthrough-5">第四部演示</div>
</div>
<script>
$(function () {
console.log("llllllllllllllll")
// 设置参数
$("body").pagewalkthrough({
name: "introduction",
steps: [
{
popup: {
//定义弹出提示引导层
content: "#walkthrough-1",
type: "modal",
},
},
{
wrapper: ".w1", //当前引导对应的元素位置
popup: {
content: "#walkthrough-2", //关联的内容元素
type: "tooltip", //弹出方式（tooltip和modal以及nohighlight）
position: "bottom", //弹出层位置（top,left, right or bottom）
},
},
{
wrapper: ".w2",
popup: {
content: "#walkthrough-3",
type: "tooltip",
position: "bottom",
},
},
{
wrapper: ".w3",
popup: {
content: "#walkthrough-4",
type: "tooltip",
position: "top",
},
},
{
wrapper: ".w4",
popup: {
content: "#walkthrough-5",
type: "tooltip",
position: "top",
},
},
],
});
// 一步一步显示引导页
$("body").pagewalkthrough("show");
});
</script>
</body>
</html>
