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

发布于 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. zths 2015/5/18 #1 回复TA

    成功搬到帖子里去了：
    http://cirno.biz/thread-24549-1-1.html
    效果在8楼

    • spoonwep po主 回复 zths 2015/5/19 回复TA

      好像不动呢

      • zths 回复 spoonwep 2015/5/19 回复TA

        不动么?…你是什么浏览器.

      • zths 回复 spoonwep 2015/5/19 回复TA

        好把我知道了 chrome不行..
        火狐和ie都是可以的..chrome我就想当然的没测.

  2. zths 2015/5/19 #2 回复TA

    = = chrome刷新一下又好了…根本不知道错在哪里辣.!!!!!!!!!!!!!!!!!!!

    • zths 回复 zths 2015/5/19 回复TA

      只要用ctrl+f5刷新 就会出现不会漂流也不能拖动的情况了…
      其他浏览器就没这问题.

  3. zths 2015/5/19 #3 回复TA

    知道哪里出问题了…
    我这里有这么一段代码:
    function frame() {
    if (kan.is(“:hidden”) && bind) { (|||ﾟДﾟ) kan.is(“:hidden”) 这里 chrome会判定为true..
    unbinds();
    }
    ….
    }
    function unbinds() {
    jQuery(document).unbind(“mousedown”, start_drag)
    .unbind(“mousemove”, dragging)
    .unbind(“mouseup”, stop_drag);
    pause();//就是这样
    }
    我该怎么判断 这个kan 是否还存在(被jQuery(kan).remove()这样,而不是隐藏或不显示)

  4. 晨旭 2015/7/26 #4 回复TA

    博主我又来了qwq,为什么我的舰娘就在下面显示了一列出来。。。发生了什么QAQ

  5. Handle 2015/9/5 #5 回复TA

    喵呜楼主大大能帮忙看看为什么舰娘失踪了么？喵~

  6. Handle 2015/9/8 #6 回复TA

    (ﾟДﾟ≡ﾟДﾟ)
    什么情况jQ加载后加上js还是没用！？再检查一下吧

    • spoonwep po主 回复 Handle 2015/9/9 回复TA

      那串js后面加一句：jQuery=jQuery.noConflict();
      或者把那串js里面的jQuery全部替换成$

  7. moehentai 2015/11/6 #7 回复TA

    本鹅完全不会搞TNT

  8. 有野出没 2015/11/7 #8 回复TA

    jquery代码部分第21行（第二部分标签开始的那部分代码）少了一个“$”,导致整个代码只有水波，没有漂浮的小东西，添加上去就ok了。

  9. Shawn 2017/6/30 #9 回复TA

    好东西，拿走啦！顺便来一波友链啊博主~

1 2

发表评论

(`・ω・´)

CAPTCHA

*

List
Love
00:00