舰娘漂流——「翻滚吧舰娘！」，火喵修改完善版
{cat_tips_warning}火喵原创，转载请注明来源{/cat_tips_warning}前言说起来这个「翻滚吧舰娘！」，最早是来自萌购的页面底部，但是一直也没去用它。后来看到大鹅的博客主页有这个漂流舰娘，也在许多其他人的博客上看到过，但是那会不会呀，觉得老有难度了。后来大鹅用了好久，也鸽了好久。近期我打算把博客改成航海主题（误 ，但是寻找大鹅博客时发现几个月前就换掉了！ （╯‵□′）╯︵┴─┴ 好在大鹅找到了源码，发给了我w当我打开源码，发现了有好几处的bug，比如小窗口拖拽有问题啦，经常会自动消失啊等等。于是在大鹅的建议下，在github上找到了原搬运作者（貌似），一看已经是八年前的东西了，那会还是用的jquery1.7.1的老古董。为了能用上这个特效，喵喵折腾了整整一晚上，游戏都没打 (｡•ˇ‸ˇ•｡) ，现在改成可以用最新的jquery3.6.0，而且修复了bug，还加上了消失循环，总之是非常完美了，可以直接移植拿去用hhh代码最近打算整整微信公众号，也无意间发现了有个关注公众号回复解密可见的小插件，本打算这次用上，但是想想，博客互动还是很重要的，就暂时不用了，以后再说吧~ 但是但是，点击左上方侧边栏的33娘，就可以关注火喵小站的公众号啦（虽然公众号暂时什么都没有，但是不介意的话还是期待能关注一下w）主体html 找一个合适的位置，把html代码选取需要，拆开放置，也可以复制到新文件查看效果。图片建议换成本地图片保存，以防图片失效。如果网站没有引入过jquery，需要在开头插入一行引入代码 相关csscss没怎么动，但是精简了一点，注意里面的图片的地址，和舰娘的一样，建议换成本地图片保存，以防图片失效（也可以下载文章最后的打包，里面有图片）新建文件，起名kancolle.css（可自己换个），放入与html同级目录{cat_hide}.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 } }{/cat_hide}相关js新建文件，起名kancolle.js（可自己换个），放入与html同级目录{cat_hide}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_hide}打包{cat_hide}{cat_download name="舰娘火喵改" url="https://dorcandy.lanzouw.com/iDWw903knwba" password="dorcandy.cn"}{/cat_hide}