jQuery Guide遮罩层jQuery插件

联合创作 · 2023-10-02 07:46

jQuery-guide是一个用于网站介绍/改版/演示的遮罩层jQuery插件.

示例代码:

var guide = $.guide({
    actions: [
        {
            element: $('#domeStartGuideBtn'),
            content: '<p>Welcome, click on the screen at any position to enter the next step</p>',
            offsetX: -140,
            offsetY: 60
        },
        {
            element: $('#domeUsingPanel'),
            content: '<p>How to using...</p>',
            offsetX: -140,
            offsetY: 0,
            beforeFunc: function(g) {
                $('#domeUsingPanel').fadeIn();
            }
        },
        {
            element: $('#domeGithubBtn'),
            content: '<p>Click here to access the project for Github</p>',
            offsetX: 0,
            offsetY: 50,
            isBeforeFuncExec: true,
            beforeFunc: function(g) {
                $('#domeGithubBtn').slideDown(function() {
                    g.execAction();
                });
            }
        }
    ]
});

演示地址: http://panlatent.github.io/jquery-guide/

使用教程: https://panlatent.com/archives/jquery-guide

浏览 4
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报