博客主页 🎤
舰娘漂流——「翻滚吧舰娘!」,火喵修改完善版

Author:

火喵酱

©

Wordage:

共计 7857 字

needs:

约 2 分钟

Popular:

303 ℃

Created:

温馨提示:

本文最后更新于2022年08月09日,已经过了53天没有更新,若内容或图片失效,请留言反馈
目 录

火喵原创,转载请注明来源

前言

说起来这个「翻滚吧舰娘!」,最早是来自萌购的页面底部,但是一直也没去用它。后来看到大鹅的博客主页有这个漂流舰娘,也在许多其他人的博客上看到过,但是那会不会呀,觉得老有难度了。后来大鹅用了好久,也鸽了好久。近期我打算把博客改成航海主题(误 ,但是寻找大鹅博客时发现几个月前就换掉了! (╯‵□′)╯︵┴─┴ 好在大鹅找到了源码,发给了我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="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="postimg isfancy lazyload" data-src="https://static01.imgkr.com/temp/545d56b5fe9d49ea82e0b6fcb6cc99e0.webp">
    </div>
    <div class="kan" href="javascript:;">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="postimg isfancy lazyload" data-src="https://static01.imgkr.com/temp/2a7dc137b56a410594ef3322cbfedba7.webp">
    </div>
    <div class="kan" href="javascript:;">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="postimg isfancy lazyload" data-src="https://static01.imgkr.com/temp/624d47381074406f9b95bec6318b1ad1.webp">
    </div>
    <div class="kan" href="javascript:;">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="postimg isfancy lazyload" data-src="https://static01.imgkr.com/temp/f1699778e2b644169827d166c6acd581.webp">
    </div>
    <div class="kan" href="javascript:;">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="postimg isfancy lazyload" data-src="https://static01.imgkr.com/temp/ce90cf778eb148cb9599e1b5dfbbf280.webp">
    </div>
    <div class="kan" href="javascript:;">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="postimg isfancy lazyload" data-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没怎么动,但是精简了一点,注意里面的图片的地址,和舰娘的一样,建议换成本地图片保存,以防图片失效(也可以下载文章最后的打包,里面有图片)

{alert type="info"}
新建文件,起名kancolle.css(可自己换个),放入与html同级目录
{/alert}

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

相关js

{alert type="info"}
新建文件,起名kancolle.js(可自己换个),放入与html同级目录
{/alert}

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

打包

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

- - - The END - - -
共计 3 条评论,点此发表评论
  1. 头像
    @
    小七
    Lv.1

    访客

    啊哈哈哈哈

    · Win 1x · QQ浏览器 · 中国移动
  2. 头像
    @
    你仔细听
    Lv.1

    访客

    过来看看~

    · Win 1x · Chrome · 海南
  3. 头像
    @
    活动酱
    新人

    访客

    我来看看!

    · Win 1x · Chrome · 广东
萌ICP备20210005号 辽ICP备2021005644号-1 辽公网安备 21021102000984号 本站已运行 2 年 205 天 17 小时 31 分 51统计 百度统计 自豪地使用 Typecho 建站,并搭配 MyDiary 主题 Copyright © 2020 ~ 2022. 火喵博客・日记本 All rights reserved.
历史足迹
分类目录
  • 日常
  • 晒物
  • 🦙 代码
  • 🏗️ 建站
  • 📷 生活