头像

jQuery实现下一步页面引导插件

来源:http://www.sucaihuo.com/js/2618 王半仙 2017-08-02 06:32浏览(354) 收藏

JQuery网页引导插件,jQuery页面功能介绍引导/教程式引导,jQuery下一步介绍功能
jQuery实现下一步页面引导插件
分类:其它特效 > 页面引导 难易:中级

程序员,你不是一个人;网站开发QQ群:35291327 在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 7 下载资源 下载积分: 50 积分

一、引入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();
});
标签: 引导下一步
评论6
头像

友情提示:垃圾评论一律封号,下载出错或者资源有问题请联系全栈客服QQ 416148489

  • 头像 5楼
    10-08 18:43
    wwdzcdb
    学习了; 谢谢老大分享
  • 头像 4楼
    08-15 15:42
    页面小能手
    积分不够啊。可以免费不?
  • 头像 3楼
    08-04 10:36
    啊水水水水
    瞧一瞧,看一看!
  • 头像 板凳
    08-02 15:03
    zhenghui8485
    看上去不错的样子!
  • 头像 椅子
    08-02 09:17
    a51821064
    不错!厉害了呀 啊哈哈哈!
  • 头像 沙发
    08-02 07:30
    dd2210212
    不错!厉害了呀 啊哈哈哈
1 2