前端实现app引导页面动画效果

插件描述：jQuery引导插件TourTip 交互式可视化指南网页上的元素。
使用方法

步骤1：

将以下标记添加到您的文档的<head>

你还需要复制旁边插件的css文件夹和下载的IMG文件夹。你就会有你需要启动一个引导网页的一切。

/ *附加的Tourtip CSS文件* /
<link rel=" stylesheet" type="text/css" href="css/tinytools.tourtip.min.css">
/ * jQuery的需要连接* /
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
/ *然后连接TourTip插件* /
<script src="tinytools.tourtip.min.js"></script>

步骤2：

准备布局引导元素

有没有必要有任何容器为每个漫游单元。你只需要介绍你的页面上的引导元素，插件，并设置必要的选项。例如，假设你有标识为TourElement1的div元素。把下面的代码在你的文档的ready事件来创建一个引导布局所提到的div元素：

<script>
    $(document).ready(function () {
        $("#TourElement1").tourTip({
            title: "Tour Title",
            description: "This is a description for the newly born TourTip :)",
            previous: true,
            position: 'right'
        });
    });
</script>

你可以游览布局不绑定到任何预定义的元素;在这种情况下，仅仅通过直接调用的tourtip创造公共方法创建引导元：

<script>
    $(document).ready(function () {
        $.tourTip.create({
            title: "Tour Title",
            description: "This is a description for the newly born TourTip :)",
            previous: true,
            position: 'right'
        });
    });
</script>

第3步：

启动发动机

至此，你会看到你的页面上没有TourTip 。只需调用start public方法来启动巡演引擎：

<script>
    $(document).ready(function () {
        $.tourTip.start();
    });
</script>

或者，你可以通过设置来启动方法。在start方法中的设置将应用到所有的引导布局一次。您另行申请各引导布局的设置，将覆盖常规设置。

来源：知乎链接：https://www.zhihu.com/question/43951047/answer/102405925

posted on 2017-03-23 13:50 菜鸟的飞翔梦阅读(1034) 评论(0) 编辑收藏举报