PC端如何实现页面引导
2023-02-18 16:41:44 时间
最近有个需求想要实现页面引导,让用户知道我们PC端的页面是如何交互的
使用Jquery-pagewalkthroung 这个库在jquery 插件需要金币的,我觉得不划算,因为这个项目本身是开源的
话不多说直接上代码 效果(点击此链接即可查看)
<!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>
相关文章
- 宝塔面板搭建和使用
- 腾讯云服务器添加可视化页面
- 面向对象的讲解
- 2023MyBatis全新面试题【30题】
- 基于边缘计算网关的空压机监测应用
- [CVPR 2022 | 论文简读] 点云的表面表示
- [JCIM | 论文简读] DENVIS:使用具有原子和表面蛋白口袋特征的图神经网络进行可扩展和高通量虚拟筛选
- [Brief. Bioinformatics | 论文简读] 基于知识的BERT:像计算化学家一样提取分子特征的方法
- [KDD 2022 | 论文简读] 面向Top-K推荐的多方面量化强化二值化图表示学习
- [ICML 2022 | 论文简读] 面向图表示学习的结构感知的Transformer
- [Nat. Commun. | 论文简读] 将生物医学数据集成和格式化为 Bioteque 中预先计算的知识图谱嵌入
- [Nature Communication | 论文简读] 将生物医学数据集成和格式化为Bioteque中预先计算的知识图谱嵌入
- [arxiv | 论文简读] CLASSIC: 方面级情感分类任务的持续和对比学习
- 欢常见的Web安全方面问题
- 面试系列-kafka exactly once语义
- 面试系列-kafka消息相关机制
- 面试系列-kafka内部通信协议
- 面试系列-kafka高可用机制
- 面试系列-kafka偏移量提交
- 面试系列-kafka事务控制