zoukankan      html  css  js  c++  java
  • 装修博客园live2d(其一)

    声明:live2d的模型和方法都是引用别人的,所以要引用相关js和css
    下面代码直接复制即可有效果

    <!--左下角live2d效果-->
    <!-- waifu-tips.js 依赖 JQuery 库 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
    <!-- 实现拖动效果,需引入 JQuery UI -->
    <script src="https://cdn.jsdelivr.net/npm/jquery-ui-dist@1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://live2d-cdn.fghrsh.net/assets/1.4.2/waifu.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://live2d-cdn.fghrsh.net/assets/1.4.2/waifu-tips.min.js"></script>
    <script src="https://live2d-cdn.fghrsh.net/assets/1.4.2/live2d.min.js"></script>

     <div class="waifu ui-draggable ui-draggable-handle" style="left: 0px; display: none;">
    <div class="waifu-tips" style=" 570px; height: 150px; top: -60px; font-size: 30px; opacity: 0;"></div>
    <canvas id="live2d" class="live2d" width="600" height="535"></canvas>
    <div class="waifu-tool" style="font-size: 36px;">
     <span class="fui-home" style="line-height: 50px; display: none;"></span>
     <span class="fui-chat" style="line-height: 50px;"></span>
     <span class="fui-eye" style="line-height: 50px;"></span>
     <span class="fui-user" style="line-height: 50px;"></span>
     <span class="fui-photo" style="line-height: 50px;"></span>
     <span class="fui-info-circle" style="line-height: 50px;"></span>
     <span class="fui-cross" style="line-height: 50px; display: none;"></span>
    </div>
    </div>
    <script type="text/javascript">
    setTimeout(() => {
           /* 可直接修改部分参数 */
            live2d_settings['modelId'] = 6;                  // 默认模型 ID
            live2d_settings['modelTexturesId'] = 9;         // 默认材质 ID
            live2d_settings['modelStorage'] = false;         // 不储存模型 ID
            live2d_settings['canCloseLive2d'] = false;       // 隐藏 关闭看板娘 按钮
            live2d_settings['canTurnToHomePage'] = false;    // 隐藏 返回首页 按钮
            live2d_settings['waifuSize'] = '300x267.5';        // 看板娘大小
            live2d_settings['waifuTipsSize'] = '285x75';    // 提示框大小
            live2d_settings['waifuFontSize'] = '15px';       // 提示框字体
            live2d_settings['waifuToolFont'] = '18px';       // 工具栏字体
            live2d_settings['waifuToolLine'] = '25px';       // 工具栏行高
            live2d_settings['waifuToolTop'] = '-60px';       // 工具栏顶部边距
            live2d_settings['waifuDraggable'] = 'axis-x';    // 拖拽样式
            /* 在 initModel 前添加 */
           initModel("https://live2d-cdn.fghrsh.net/assets/1.4.2/waifu-tips.json");
    }, 600)
    </script>

  • 相关阅读:
    Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'Window': An object could not be cloned.
    iframe的坑
    echarts展示
    常量
    变量赋值
    变量声明
    变量初始化
    windows下nvm的安装及使用
    sessionStorage 使用方法
    jquery+ajax获取本地json对应数据
  • 原文地址:https://www.cnblogs.com/ogurayui/p/12205821.html
Copyright © 2011-2022 走看看