Shadow DOM 隔离 无依赖 单文件 IIFE
右下角应该已经出现一只露露。你可以 拖动 她、双击 切换动画 / 让她说话、右键 打开菜单。
在任意网站引入(最简,资源默认走脚本同级 ./assets/):
<script src="https://lulu.feifeile.cn/lulu-pet.min.js"></script>
需要自定义参数:
<script
src="https://lulu.feifeile.cn/lulu-pet.min.js"
data-assets="https://lulu.feifeile.cn/assets/"
data-size="140"
data-position="bottom-right"
data-auto-walk="true"></script>
支持的 data-* 选项:data-assets(必填,资源目录)、data-size、data-margin、data-position、data-auto-walk、data-storage-key、data-no-auto="true"。
编程式 API:LuluPet.init({...}) / LuluPet.destroy() / LuluPet.get()。
👇 这是一段很长的占位文字,方便你滚动测试,看露露会不会跟着滚动。她应该是固定在窗口的,不随页面滚动而动。
👇 再来一段。露露的样式被 Shadow DOM 封闭,不会污染你网站的 CSS。她也不会触发宿主页面的 click 事件。
👇 番茄钟数据保存在 localStorage,键前缀可通过 data-storage-key 改名,避免和其它实例冲突。