舰娘漂流——「翻滚吧舰娘！」，火喵修改完善版

前言

说起来这个「翻滚吧舰娘！」，最早是来自萌购的页面底部，但是一直也没去用它。后来看到大鹅的博客主页有这个漂流舰娘，也在许多其他人的博客上看到过，但是那会不会呀，觉得老有难度了。后来大鹅用了好久，也鸽了好久。近期我打算把博客改成航海主题（误 ，但是寻找大鹅博客时发现几个月前就换掉了！ （╯‵□′）╯︵┴─┴ 好在大鹅找到了源码，发给了我w

当我打开源码，发现了有好几处的bug，比如小窗口拖拽有问题啦，经常会自动消失啊等等。于是在大鹅的建议下，在github上找到了原搬运作者（貌似），一看已经是八年前的东西了，那会还是用的jquery1.7.1的老古董。为了能用上这个特效，喵喵折腾了整整一晚上，游戏都没打 (｡•ˇ‸ˇ•｡) ，现在改成可以用最新的jquery3.6.0，而且修复了bug，还加上了消失循环，总之是非常完美了，可以直接移植拿去用hhh

代码

最近打算整整微信公众号，也无意间发现了有个关注公众号回复解密可见的小插件，本打算这次用上，但是想想，博客互动还是很重要的，就暂时不用了，以后再说吧~ 但是但是，点击左上方侧边栏的33娘，就可以关注火喵小站的公众号啦（虽然公众号暂时什么都没有，但是不介意的话还是期待能关注一下w）

主体html

<link rel="stylesheet" type="text/css" href="kancolle.css" />
<div class="kankore-bath">
    <div style="animation: 10s linear 0s normal none infinite waves-r2l;" class="water">
    </div>
    <div class="kan" href="javascript:;">
        <img src="https://static01.imgkr.com/temp/545d56b5fe9d49ea82e0b6fcb6cc99e0.webp">
    </div>
    <div class="kan" href="javascript:;">
        <img src="https://static01.imgkr.com/temp/2a7dc137b56a410594ef3322cbfedba7.webp">
    </div>
    <div class="kan" href="javascript:;">
        <img src="https://static01.imgkr.com/temp/624d47381074406f9b95bec6318b1ad1.webp">
    </div>
    <div class="kan" href="javascript:;">
        <img src="https://static01.imgkr.com/temp/f1699778e2b644169827d166c6acd581.webp">
    </div>
    <div class="kan" href="javascript:;">
        <img src="https://static01.imgkr.com/temp/ce90cf778eb148cb9599e1b5dfbbf280.webp">
    </div>
    <div class="kan" href="javascript:;">
        <img src="https://static01.imgkr.com/temp/ccee2dcf304e4ded8f6e4805d01fba57.webp">
    </div>
</div>
<script type="text/javascript" src="kancolle.js"></script>

找一个合适的位置，把html代码选取需要，拆开放置，也可以复制到新文件查看效果。图片建议换成本地图片保存，以防图片失效。如果网站没有引入过jquery，需要在开头插入一行引入代码

<script type="text/javascript" src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>

相关css

css没怎么动，但是精简了一点，注意里面的图片的地址，和舰娘的一样，建议换成本地图片保存，以防图片失效（也可以下载文章最后的打包，里面有图片）

新建文件，起名kancolle.css（可自己换个），放入与html同级目录

此处内容，需回复之后可见

相关js

新建文件，起名kancolle.js（可自己换个），放入与html同级目录

此处内容，需回复之后可见

打包

此处内容，需回复之后可见