如何给你的网站添加一个可爱的弹簧人物
效果是通过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, // 位移高度 }); })
javascript1.6KB© 壹影
白衣
2025-02-01 01:27哦哟,确实有意思喔