为网页添加live2d看板娘

介绍

想给你的网页添加一个看板娘吗？
很简单，只需要两步：

上传assets目录到你的网站
在想添加看板娘的页面上加入以下代码：

<!-- 网站头部引入css -->
<head>
    <link rel="stylesheet" type="text/css" href="assets/waifu.min.css?v=1.4.2"/>
</head>
<body>
<!-- waifu-tips.js 依赖 JQuery 库 -->
    <script src="assets/jquery.min.js?v=3.3.1"></script>
    
    <!-- 实现拖动效果，需引入 JQuery UI -->
    <script src="assets/jquery-ui.min.js?v=1.12.1"></script>
    
    <div class="waifu">
        <div class="waifu-tips"></div>
        <canvas id="live2d" class="live2d"></canvas>
        <!-- 工具条，不需要可以删除div --->
        <div class="waifu-tool">
            <span class="fui-home"></span>
            <span class="fui-chat"></span>
            <span class="fui-eye"></span>
            <span class="fui-user"></span>
            <span class="fui-photo"></span>
            <span class="fui-info-circle"></span>
            <span class="fui-cross"></span>
        </div>
    </div>
        
    <script src="assets/waifu-tips.min.js?v=1.4.2"></script>
    <script src="assets/live2d.min.js?v=1.0.5"></script>
    <script type="text/javascript">
        /* 可直接修改部分参数 */
        live2d_settings['modelId'] = 1;                  // 默认模型 ID
        live2d_settings['modelTexturesId'] = 87;         // 默认材质 ID
        live2d_settings['modelStorage'] = false;         // 不储存模型 ID
        live2d_settings['canCloseLive2d'] = false;       // 隐藏 关闭看板娘 按钮
        live2d_settings['canTurnToHomePage'] = false;    // 隐藏 返回首页 按钮
        live2d_settings['waifuSize'] = '300x270';        // 看板娘大小
        live2d_settings['waifuTipsSize'] = '570x150';    // 提示框大小
        live2d_settings['waifuFontSize'] = '30px';       // 提示框字体
        live2d_settings['waifuToolFont'] = '36px';       // 工具栏字体
        live2d_settings['waifuToolLine'] = '50px';       // 工具栏行高
        live2d_settings['waifuToolTop'] = '-60px';       // 工具栏顶部边距
        live2d_settings['waifuDraggable'] = 'axis-x';    // 拖拽样式
        /* 在 initModel 前添加 */
        initModel("assets/waifu-tips.json?v=1.4.2")
    </script>
</body>

下载

live2d看板娘下载：进入下载

文章标题：为网页添加live2d看板娘
如果文中内容侵犯了您的权益，请及时与博主取得联系进行删除！
本站文章未经许可禁止转载，本文地址：https://blog.wanvale.com/archives/63/