网站添加一个可爱的弹簧人物

给你的网站添加一个可爱的弹簧人物

效果是通过Sakana实现

github：点我跳转

我这边编写了一键引入的js 将js引入到你的网站中即可看到效果

function loadJs(path,callback){
        let header = document.getElementsByTagName("head")[0]
        let script = document.createElement("script")
        script.setAttribute("src",path)
        header.appendChild(script)
        if(!/*@cc_on!@*/false){
            script.onload=function (){
                console.log("非ie")
                callback()
            }
        }else{
            script.onreadystatechange=function () {
                if(script.readystate=="loaded" || script.readystate=="complate"){
                    console.log("ie")
                    callback();
                }
            }
        }
    }
    loadJs("https://cdn.jsdelivr.net/npm/sakana",function (){
        //添加网页元素到浏览器
        let header = document.getElementsByTagName("head")[0]
        let body = document.getElementsByTagName("body")[0]
        let cssTag=document.createElement("style")
        cssTag.innerHTML=`
            html .sakana-box{
            z-index: 80;
            position: fixed;
            right: 0;
            bottom: 0;
            transform-origin: 100% 100%; /* 从右下开始变换 */
            }`
        cssTag.setAttribute("type","text/css")
        header.appendChild(cssTag)
        // <div class="sakana-box"></div>
        //添加一个元素
        let mainEle=document.createElement("div")
        mainEle.classList.add("sakana-box")
        body.appendChild(mainEle)
        // 启动
        const sakana = Sakana.init({
        el: '.sakana-box', // 启动元素 node 或 选择器
        scale: .5, // 缩放倍数
        canSwitchCharacter: true, // 允许换角色
        inertia: 0.01, // 惯性
        decay: 0.97, // 衰减
        r: -20, // 启动角度
        y: 10, // 启动高度
        scale: 0.5, // 缩放倍数
        translateY: 0, // 位移高度
        });
    })

• 分类： 技术教程
• 标签： 网站美化
• 地址：https://wkoh.cn/11.html
• 版权声明：所有文章除特别声明外均系本人自主创作，转载及引用请联系作者，并注明出处（作者、原文链接等）。