地址：https://github.com/jwarby/jquery-pagewalkthrough
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery-pagewalkthrough</title>
<script src="jquery-1.11.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="jquery.pagewalkthrough.css" />
<script type="text/javascript" src="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>
image.png
image.png
