JQuery网页引导插件,jQuery页面功能介绍引导/教程式引导,jQuery下一步介绍功能
一、引入jquery.js ,WebPageGuide.js ,WebPageGuide.css
二、引导页面html代码
<div style="width:200px;height:200px;background-color:blue;margin:0px 0px 0px 200px;" id="target"></div>
<div style="width:200px;height:200px;background-color:red;position:absolute;left:20px;top:500px" id="target2"></div>
<div style="width:200px;height:200px;background-color:yellow;position:absolute;left:20px;top:1700px" id="target3"></div>
<div style="width:200px;height:200px;background-color:green;position:absolute;right:20px;top:700px" id="target4"></div>
<div style="width:200px;height:200px;background-color:brown;position:absolute;right:20px;top:300px" id="target5"></div>
<div style="width:200px;height:200px;background-color:pink;position:absolute;right:20px;top:20px" id="target6"></div>
三、js调用
$(function() {
var steplist = $.WebPageGuide({showCloseButton: true});
steplist.newGuidStep("#target", "这是标题1啊这是标题1啊这是标题1啊这是标题1啊", "更嫩诶诶额更嫩诶诶额更嫩诶诶额更嫩诶诶额嫩诶诶额更嫩诶诶额更嫩诶诶额嫩诶诶额更嫩诶诶额更嫩诶诶额嫩诶诶额更嫩诶诶额更嫩诶诶额更嫩诶诶额");
steplist.newGuidStep("#target2", "这是标题2啊", "更嫩诶诶额");
steplist.newGuidStep("#target3", "这是标题3啊", "更嫩诶诶额");
steplist.newGuidStep("#target4", "这是标题4啊", "更嫩诶诶额");
steplist.newGuidStep("#target5", "这是标题5啊", "更嫩诶诶额");
steplist.newGuidStep("#target6", "这是标题6啊", "更嫩诶诶额");
steplist.startGuide();
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791