zl程序教程

您现在的位置是:首页 >  其他

当前栏目

用代码在浏览器挂上一个专属自己的小猫咪

2023-03-15 22:07:41 时间

这里给大家分享的是还热乎的撸猫插件,基于油猴,当然,也不限定只能撸猫,也可以撸猫娘甚至撸万物?!(当然,需要你用 html+css+js 实现,再导入进来就行)

这里,向各位大佬讨要一下学习资料(指css动画类的,猫耳娘这种最好)

插件链接

先上效果图


整个插件基于 jq 进行的 dom 操作,其中,为了隔绝自己的 html 资源受到当前页面的样式的影响,使用了 iframe 进行资源隔离(这里天坑一个)


如图示,插件默认是一个小猫咪,挂载页面的右下角一直再睡,也没有鼠标交互效果,和 live2d 比起来差了不止一丢丢

当然,这个插件还是有一点可取之处的,鼠标悬浮上去之后,会显示出两个按钮,一个是打开列表页面,然后进行资源管理;另一个就是在当前的资源里选取下一个资源进行展示

列表管理

add 按钮添加一条行记录,第一项输入资源描述,第二项贴上资源的 html 源码,后台使用了节流的功能,动态检查文本输入,然后保存到浏览器的 localStorage

不想要的资源点 删除 直接删了

在这个地方,可以选择自己想要展示的资源,直接点 启用

如图,我们切换个自己的资源,简简单单


对了,这个弹窗怎么没有关闭按钮

遵循着懒人指南原则,鼠标移出弹窗后,延迟1s后自己会关

考虑到有喜欢左右横跳的大佬(优化体验),也加入了节流的理念


这个插件最大的价值,就是提供了一个平台,可以使用自己开发的 html,然后添加在列表中,直接启用就完事,专注于动画的开发而不关心其他。