blog新增Live2D的看板娘 附安装教程
in 前端 with 0 comment

blog新增Live2D的看板娘 附安装教程

in 前端 with 0 comment

今天逛鱼塘的时候突然发现左下角有一个看板娘,以往见到的都是一个贴图的静态看板娘然后加一个tips,这次居然会跟随鼠标轨迹转动(高端伪3D)。

于是开启了F12扒模板的过程,代码如下:

<!-- live2D -->
<script src="https://cdn.jsdelivr.net/gh//timeromantic/static@1.0/js/2D/L2Dwidget.1.min.js.js"></script>
<div id="live2d-widget">
    <canvas id="live2dcanvas" width="200" height="400" style="position: fixed; opacity: 0.7; left: 0px; bottom: -20px; z-index: 99999; pointer-events: none;"></canvas>
</div>
<script>
function isMobile() {
    var userAgentInfo = navigator.userAgent;

    var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"];

    var mobile_flag = false;

    //根据userAgent判断是否是手机
    for (var v = 0; v < mobileAgents.length; v++) {
        if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
            mobile_flag = true;
            break;
        }
    }

    var screen_width = window.screen.width;
    var screen_height = window.screen.height;

    //根据屏幕分辨率判断是否是手机
    if(screen_width < 500 && screen_height < 800){
        mobile_flag = true;
    }

    return mobile_flag;
}
if (isMobile() === false) {
    L2Dwidget.init();
}
</script>

关于自定义的方法可以参考张鑫旭大大的这篇文章:
二次元live2d看板娘效果中的web前端技术

Comments are closed.