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

前言

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

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

代码

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

主体html

♾️ 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，需要在开头插入一行引入代码

♾️ html 代码:

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

相关css

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

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

♾️ css 代码:

.kankore-bath .water {
    height: 50px;
    background: url(https://static01.imgkr.com/temp/f69b419c55d34cc68e0689419e12b04e.webp) repeat-x bottom;
    z-index: 105;
    position: fixed;
    bottom: -1px;
    width: 100%;
    opacity: .8;
    left: 0;
    -webkit-animation: waves-r2l 10s linear infinite;
    -moz-animation: waves-r2l 10s linear infinite;
    -ms-animation: waves-r2l 10s linear infinite;
    -o-animation: waves-r2l 10s linear infinite;
    animation: waves-r2l 10s linear infinite
}

.kankore-bath .kan {
    cursor: pointer;
    position: fixed;
    top: 999px;
    left: -20px;
    display: none;
    z-index: 99
}

.kankore-bath .kan.floating {
    -webkit-transition: left 1s linear, top 1s linear, -webkit-transform 1.5s ease !important;
    -moz-transition: left 1s linear, top 1s linear, -moz-transform 1.5s ease !important;
    -ms-transition: left 1s linear, top 1s linear, -ms-transform 1.5s ease !important;
    -o-transition: left 1s linear, top 1s linear, -o-transform 1.5s ease !important;
    transition: left 1s linear, top 1s linear, transform 1.5s ease !important
}

.kankore-bath .kan.dragging {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
    -webkit-animation: kan-swing .8s linear infinite;
    -moz-animation: kan-swing .8s linear infinite;
    -ms-animation: kan-swing .8s linear infinite;
    -o-animation: kan-swing .8s linear infinite;
    animation: kan-swing .8s linear infinite
}

.kankore-bath .kan.dropping {
    -webkit-transition: top .8s cubic-bezier(.795, .21, .535, 1.235) !important;
    -moz-transition: top .8s cubic-bezier(.795, .21, .535, 1.235) !important;
    -ms-transition: top .8s cubic-bezier(.795, .21, .535, 1.235) - !important;
    -o-transition: top .8s cubic-bezier(.795, .21, .535, 1.235) !important;
    transition: top .8s cubic-bezier(.795, .21, .535, 1.235) !important
}

.kankore-bath .kan img {
    opacity: 1 !important;
    outline: none;
    pointer-events: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none
}

@-webkit-keyframes waves-r2l {
    0% {
        background-position: 0 0
    }
    100% {
        background-position: -552px 0
    }
}

@keyframes waves-r2l {
    0% {
        background-position: 0 0
    }
    100% {
        background-position: -552px 0
    }
}

@-webkit-keyframes waves-l2r {
    0% {
        background-position: 0 0
    }
    100% {
        background-position: 552px 0
    }
}

@keyframes waves-l2r {
    0% {
        background-position: 0 0
    }
    100% {
        background-position: 552px 0
    }
}

相关js

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

♾️ js 代码:

var prefixs = ["-webkit-", "-moz-", "-ms-", ""];

        /* 防止触发ie的图片拖动效果 */
        document.ondragstart = function() {
            return false;
        };
        /* 随机选择一只舰娘 */
        var kans = $('.kankore-bath .kan'),
            kan_id = Math.floor(Math.random() * kans.length),
            kan = kans.eq(kan_id);
        /* 随机从左侧或右侧进入屏幕 */
        var screen_width = $(window).width(),
            screen_height = $(window).height(),
            x = Math.random() > .5 ? screen_width : -170,
            dx = x > 0 ? -10 : 10,
            y = screen_height - 170,
            angle = 1.3,
            water_direction = x > 0 ? 'waves-r2l' : 'waves-l2r';
        /* 根据舰娘漂浮的方向决定水流方向 */
        var water_animation = {};
        for(var i in prefixs)
            water_animation[prefixs[i] + 'animation'] = water_direction + ' 10s linear infinite';
        $('.kankore-bath .water').css(water_animation);
        /* 把舰娘放到初始位置上 */
        kan.css({
            'left': x,
            'top': y,
            'display': 'block'
        }).addClass('floating');
        /* 鼠标抓取 */
        $(document).on('mousedown', '.kan', start_drag)
            .on('mousemove', dragging)
            .on('mouseup', stop_drag);
        /* resize */
        $(window).resize(function() {
            screen_height = $(window).height(),
                y = screen_height - 170;
        });
        var tick = null;
        float();
        /* GO */
        function float() {
            clearInterval(tick);
            tick = setInterval(frame, 1000);
        }

        function frame() {
            if(x < -170) {
                dx = 10
            }
            else if(x > screen_width) {
                dx = -10
            }
            x += dx;
            var _y = y + 3 * Math.sin(x) - 3;
            angle = Math.random() * 4 - 2;
            var transform = {
                'left': x,
                'top': _y
            };
            for(var i in prefixs) {
                transform[prefixs[i] + 'transform'] = 'rotate(' + angle + 'deg)';
            }
            kan.css(transform);
            
        }

        function pause() {
            clearInterval(tick);
        }

        var offsetX, offsetY, mouse_down_flag = false,
            mouse_move_flag = false;

        function start_drag(e) {
            /* 暂停漂浮动画 */
            pause();
            kan.removeClass('floating').addClass('dragging');
            /* 记录用户操作 */
            mouse_down_flag = true;
            mouse_move_flag = false;
            /* 记录鼠标点击的位置与舰娘图像的左上角坐标差 */
            offsetX = kan.offset().left - e.pageX;
            offsetY = kan.offset().top - e.pageY;
        }

        function dragging(e) {
            if(!mouse_down_flag) return;
            mouse_move_flag = true;
            x = e.clientX + offsetX;
            /* 舰娘跟随鼠标移动 */
            kan.css({
                'left': x,
                'top': e.clientY + offsetY
            });
        }

        function stop_drag() {

                /* 有移动则是鼠标拖拽事件 */
                kan.removeClass('dragging').addClass('dropping');
                kan.css({
                    'left': x,
                    'top': y
                });
                setTimeout(function() {
                    kan.removeClass('dropping').addClass('floating');
                    frame();
                    float();
                }, 800);
            
            /* 重置标识 */
            mouse_down_flag = false;
            mouse_move_flag = false;
        }

到这里就结束啦

打包

{cat_download name="舰娘火喵改" url="https://dorcandy.lanzouw.com/iDWw903knwba" password="dorcandy.cn"}