添加“翻滚吧！舰娘”到博客……

发布于 2014年7月26日
by
归档于 收藏分享

kankore-bath-shimakaze

只是从萌购扒过来的……额外添加了两只舰娘——卯月和弥生 ヽ(`Д´)ﾉ  记得把图片链接换掉哦，我的七牛流量10G不够用了！不换的打屁股！

不限wp使用，如果你有论坛，直接安装这个插件就可以了 http://addon.discuz.com/?@cat_shimakaze.plugin

先载入jquery别忘了，然后添加以下代码即可

CSS：

/*kankore*/
.kankore-bath .water {
	height:50px;
	background:url("http://kaga.u.qiniudn.com/kankore-bath-water.png") 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 .copyright {
	position:relative;
	top:30px;
	left:5px;
	color:#fff;
	font-size:80%;
	opacity:.8
}
.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
}
}@-webkit-keyframes kan-swing {
	0% {
	-webkit-transform:rotate(1deg)
}
50% {
	-webkit-transform:rotate(-2deg)
}
100% {
	-webkit-transform:rotate(1deg)
}
}@keyframes kan-swing {
	0% {
	transform:rotate(1deg)
}
50% {
	transform:rotate(-2deg)
}
100% {
	transform:rotate(1deg)
}
}

JS：

<script>
			    var prefixs = ["-webkit-", "-moz-", "-ms-", ""];
			    jQuery(".in-stock-figure").on("mouseenter", ".preview", function() {
			      var left = (jQuery(this).index() + 1)*228;
			      if( jQuery.browser.msie && jQuery.browser.version < 10 )
			        jQuery(".large-image-list").css("left", "-" + (left - 4) + "px");
			      else 
			        for( var i in prefixs ) {
			          jQuery(".large-image-list").css( prefixs[i] + "transform", "translate3d(-" + left + "px, 0, 0)" );
			        }
			    }).on("mouseleave", function() {
			      if( jQuery.browser.msie && jQuery.browser.version < 10 )
			        jQuery(".large-image-list").css("left", "5px");
			      else
			        for( var i in prefixs ) {
			          jQuery(".large-image-list").css( prefixs[i] + "transform", "translate3d(0, 0, 0)" );
			        }
			    })
</script>
<script type="text/javascript">
			  (function(jQuery) {
			    document.ondragstart = function(){ return false; }
			    var kans = jQuery(".kankore-bath .kan"),
			        kan_id = Math.floor(Math.random()*kans.length),
			        kan = kans.eq(kan_id);
			    var screen_width = jQuery(window).width(),
			        screen_height = jQuery(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";
			    jQuery(".kankore-bath .water").css(water_animation);
			    kan.css({"left": x, "top": y, "display": "block"}).addClass("floating")
			    jQuery(document).on("mousedown", ".kan", start_drag)
			    .on("mousemove", dragging)
			    .on("mouseup", stop_drag);
			    jQuery(window).resize(function(){
			      screen_height = jQuery(window).height(),
			      y = screen_height - 170;
			    });
			    var tick = null;
			    float();
			    function float() {
			      clearInterval(tick);
			      tick = setInterval(frame, 1000);
			    }
			    function frame(){
			      if( x < -170 || x > screen_width ) {
			        stop();
			      }
			      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)"
			      }
			      if( jQuery.browser.msie && jQuery.browser.version < 10 ) {
			        kan.animate(transform, 1000, "linear");
			      } else {
			        kan.css(transform);
			      }
			    }
			    function pause() {
			      clearInterval(tick);
			    }
			    function stop() {
			      pause();
			      jQuery(".kankore-bath").fadeOut();
			    }
			    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.screenX;
			      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() {
			      if( !mouse_down_flag ) 
			        return;
			      if( !mouse_move_flag ) {
			        stop()
			        var url = kan.attr("href");
			        window.open(url, "_blank");
			      } else {
			        kan.removeClass("dragging").addClass("dropping");
			        if( jQuery.browser.msie && jQuery.browser.version < 10 )
			          kan.animate({"left": x, "top": y}, 800);
			        else
			          kan.css({"left": x, "top": y});
			        setTimeout(function() {
			          kan.removeClass("dropping").addClass("floating");
			          frame();
			          float();
			        }, 800);
			      }
			      mouse_down_flag = false;
			      mouse_move_flag = false;
			    }
			  })(jQuery);
</script>

然后在footer.php添加HTML：

<div class="kankore-bath">
                <div style="animation: 10s linear 0s normal none infinite waves-r2l;" class="water">
                </div>
                <div class="akagi kan" href="javascript:;">
                  <img src="http://kaga.u.qiniudn.com/kankore-bath-akagi.png">
                </div>
                <div class="shimakaze kan floating" href="javascript:;">
                  <img src="http://kaga.u.qiniudn.com/kankore-bath-shimakaze.png">
                </div>
                <div class="ryujo kan" href="javascript:;">
                  <img src="http://kaga.u.qiniudn.com/kankore-bath-ryujo.png">
                </div>
                <div class="kitakami kan" href="javascript:;">
                  <img src="http://kaga.u.qiniudn.com/kankore-bath-kitakami.png">
                </div>
                <div class="akagi kan" href="javascript:;">
                  <img src="http://kaga.u.qiniudn.com/kankore-bath-uzuki.png">
                </div>
                <div class="akagi kan" href="javascript:;">
                  <img src="http://kaga.u.qiniudn.com/kankore-bath-yayoi.png">
</div>

 

这篇文章有69条评论

  1. 千寻 2014/7/26 #1 回复TA

    食屎吧你(｀･ω･)

  2. 安心院薰染 2014/7/27 #2 回复TA

    食屎吧你(｀･ω･) 【x

    sell.moe/shinakaze.html ←好像打错辣┗( ′°д°｀┗)？

    吃撑好萌好萌（铝土BOOM
    北魔好萌好萌（酸素鱼雷BOOM
    RJ好平好平（醋溜便当BOOM
    风岛好慢好慢（おっ！
    兔子好圆好圆（ぴょん！
    弥生hao（ry

    都刷出来看了看……
    (:3っ[____] 满足で寝る。

    • spoonwep po主 回复 安心院薰染 2014/7/27 回复TA

      *´∀`)´∀`) 不小心打错了
      下面的好萌好萌(つд⊂)

  3. 编谈 2014/7/27 #3 回复TA

    食屎吧你(｀･ω･)
    (つд⊂)

    • spoonwep po主 回复 编谈 2014/7/28 回复TA

      (# ﾟДﾟ)打你哦

  4. 望月的博客 2014/7/28 #4 回复TA

    这么牛逼啊亲

  5. Moon 2014/7/28 #5 回复TA

    好萌丫！我有骑牛200的代金卷哦呵呵

    • spoonwep po主 回复 Moon 2014/7/28 回复TA

      OAQ 送窝

    • spoonwep po主 回复 Moon 2014/8/13 回复TA

      我靠，七牛也送我了200代金券，但是我以前用过就不能用了(;´Д`)
      还好我机智地注册了一个小号(｀･ω･)

      • moon 回复 spoonwep 2014/8/13 回复TA

        其实我在想,既然有免费额度,多搞几个号弄分流不就好了…(´ﾟДﾟ`)

        • spoonwep po主 回复 moon 2014/8/13 回复TA

          (´ﾟДﾟ`)要是以后除了规则被封号了咋办

          • moon 回复 spoonwep 2014/8/13 回复TA

            |-` )应该不会吧…我拼命用也就一个月五块钱,这么小流量应该不会被发现

            • spoonwep po主 回复 moon 2014/8/13 回复TA

              |-` ) 以防万一

  6. 猫箱内の巴托拉 2014/7/28 #6 回复TA

    图床的话我觉得还是用自己的机器做图床比较安心= =
    顺手做个图床速度优化

  7. Sapphirell 2014/7/31 #7 回复TA

    食屎吧你(｀･ω･)

  8. DIYgod 2014/8/1 #8 回复TA

    ⊙﹏⊙为什么都说 食屎吧你(｀･ω･)

    • spoonwep po主 回复 DIYgod 2014/8/2 回复TA

      因为他们都是笨蛋呀(っ*´Д`)っ

  9. kn007 2014/8/8 #9 回复TA

    我全部又拍云了，连同mp3，嘘，一般人我不告诉他

  10. air 2014/8/12 #10 回复TA

    (｀･ω･)(｀･ω･)(｀･ω･)(｀･ω･) 评论好和谐

  11. 厦门品讯科技微信营销 2014/8/15 #11 回复TA

    好牛逼的赶脚

  12. Flippy 2014/8/27 #12 回复TA

    刚刚发现了，，昨天我试着扒了半天也扒不下来。。原来是js一直找不到，原来就是这个。但是为什么。。。海水翻滚了半天，舰娘还是没有出现……(*ﾟーﾟ)

  13. eddie32 2014/9/11 #13 回复TA

    弄了好长时间没有搞明白..鼠标点不上..

  14. tcdw 2015/2/14 #14 回复TA

    我想把它制作成typecho插件并公开发布，可以吗？
    我会注明原出处的。
    谢谢！

    • kagami 回复 tcdw 2015/2/15 回复TA

      应该大丈夫，我这里的代码基本也是萌购那里的

  15. 晨旭 2015/2/22 #15 回复TA

    海水一直摇啊摇。。。就是没舰娘→_→

    • Kagami 回复 晨旭 2015/2/22 回复TA

      可能是你jquery没加载吧

      • 晨旭 回复 Kagami 2015/2/22 回复TA

        那怎么加载呢Orz。。。。还有那个js加到哪个文件里。。。我是小白→_→

        • Kagami 回复 晨旭 2015/2/22 回复TA

          在这个js文件之前加上一行：
          [script src=’jquery地址’ type=’text/javascript’][/script]
          把[换成小于号,]换成大于号

          • 晨旭 回复 Kagami 2015/2/22 回复TA

            0.0没看懂。。。。。我是问那个JS加到哪里。。。新建一个文件还是加到主题里面呢。。。。加到那个文件。。。
            还有<script src=’jquery地址’ type=’text/javascript’][/script]是放在JS前面吗。。。。

            海水还在摇Orz

            • Kagami 回复 晨旭 2015/2/22 回复TA

              你主题里面有js文件的话加到这个文件里，你也可以新建一个js文件，把它放在header.php或者footer.php，jquery要放在js文件之前

1 2

发表评论

(`・ω・´)

CAPTCHA

*

List
Love
00:00