动漫小可爱-网页添加L2Dwidget.js

这篇具有很好参考价值的文章主要介绍了动漫小可爱-网页添加L2Dwidget.js。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动漫小可爱</title>
    <link rel="stylesheet" href="waifu/waifu.css">
</head>

<body>

    <div class="waifu">
        <div class="waifu-tips"></div>
        <canvas id="live2d" class="live2d"></canvas>
        <!-- 工具栏 -->
        <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>
</body>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/L2Dwidget.min.js"></script>
<script src="waifu/waifu-tips.js"></script>
<script src="waifu/live2d.min.js"></script>
<script type="text/javascript">
    /* 可直接修改部分参数 */
    live2d_settings['hitokotoAPI'] = 'hitokoto.cn';  // 一言 API
    live2d_settings['modelId'] = 3;                  // 默认模型 ID
    live2d_settings['modelTexturesId'] = 2;          // 默认材质 ID
    live2d_settings['modelStorage'] = false;         // 不储存模型 ID
    initModel("waifu/waifu-tips.json")
    var selectAry = [
        ["chitose"],
        ["epsilon2_1"],
        ['haru'],
        ["gf"],
        ["haruto"],
        ["hibiki"],
        ["hijiki"],
        ["izumi"],
        ["koharu"],
        ["miku"],
        ["nico"],
        ["ni-j"],
        ["nipsilon"],
        ["nito"],
        ["nietzsche"],
        ["shizuku"],
        ["tororo"],
        ["tsumiki"],
        ["unitychan"],
        ["wanko"],
        ["z16"]
    ];
    var num = ['01', '02'];
    var mode = selectAry[parseInt(Math.random() * selectAry.length)][0];
    var modeClass = mode;
    if (mode == 'haru') {
        let S = num[parseInt(Math.random() * num.length)];
        mode = mode + '/' + S;
        modeClass = mode.replace('/', '');
    }
    L2Dwidget.init({
        "model": { "jsonPath": "packages/live2d-widget-model-" + mode + "/assets/" + modeClass + ".model.json", "scale": 1, "hHeadPos": 0.5, "vHeadPos": 0.618 },
        "dialog": {
            enable: true,
            script: {
                //每20s,显示一言(调用一言Api返回的句子)
                'every idle 20s': '$hitokoto$',
                'hover div': '星星在天上而你在我心里 (*/ω\*)',
                //触摸到身体
                'tap body': '害羞⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄',
                //触摸到头部
                'tap face': '~~'
            }
        },
        "mobile": { "show": true, scale: 0.5 },
        "display": {
            "superSample": 2,
            "width": 200,
            "height": 400,
            "position": "right",
            "hOffset": 0,
            "vOffset": 0
        }

    });
</script>

</html>

文件包:下载
动漫小可爱-网页添加L2Dwidget.js,JavaScript,前端,jq,javascript,开发语言,ecmascript文章来源地址https://www.toymoban.com/news/detail-708927.html

到了这里,关于动漫小可爱-网页添加L2Dwidget.js的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包