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

效果是通过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, // 位移高度
    });
})
javascript
1.6KB
© 壹影