読者です 読者をやめる 読者になる 読者になる

灰色の棚

適当な話を適当に書くので、適当に見ていってください

jQueryで再帰ループを使って、プサンシステム(自称)を作ったよ!


スポンサードリンク

f:id:syunki-gt:20150126112212j:plain
 こんにちは、斜め上のアイディアを実現することに定評のある、瞬希です(挨拶)

 なぜこういう挨拶かというと、さっき id:bulldra さんに

 こういう記事で言及・紹介して頂いたからです!


 上記記事、なんだかうちの場違い感が半端ない気もしましたが、面白いと言っていただけて非常に嬉しかったです。


 そして、Web技術系のブログとして紹介していただいたからには、そういう記事書きたいなと思いました。

 いくつかのアイデアの中から、パッと実現できそうで面白そうな全く意味のないものを作ってみました!

作ったもの

 プサンシステム

 これです。ぜひ行って、スタートのリンクを押してみてください。


 何に使えるかはさっぱり分からないものですが、技術的にはちょっと面白いことしてたりします。

作り方

 ソースは最後に貼ります。


 上記のページを見ていただければわかると思いますが、ぐるぐる回っているだけのものです。

 でも、ずっと止まりません。javascriptjQuery)で再帰をしたくて、作りました。


 使っている技術は、スムーズなスクロールのアニメーションはまぁいいとして、あとはjQuery.Deferredだけですね。

 ガッチリ理解したわけじゃないけど、なんとなく使えるんだなという感じになりました。


 参考にした記事は、

 こちら。


 一応、いろいろ調べたりして軽く理解したつもりですが、今回のシステムではほぼコピペですね。

 改変は.resolveに値を入れて引数を持たせたくらいです。

おわりに

 javascript再帰の無限ループを作ろうとすると、sleep的なものを噛ませてもタイマーで呼ぶのを遅らせても、固まりました。

 で、どうするかなという感じで調べてみて、こういうものが出来ました。


 プサンシステムのプサンの由来、分かりますか? ヒントはこの動きですね。あとは止まらないこと。

 ぜひ考えてみてくださいー。


 という感じで今回はここまで。

 あー、面白かった。おわり!

ソース

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>プサンシステム</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
var wait_time =  function(time, n){
	return (function(){
		var dfd = $.Deferred()
		setTimeout(function(){  console.log("resolve#wait_time("+time+") ");dfd.resolve(n + 1); }, time);
		return dfd.promise()
	})
}
function pusan(n) {
	var speed = 1000;
	var x = 0, y = 0;
	if(n % 4 == 0 || n % 4 == 1) {
		y = $("html, body").height() - $(window).height();
	}
	if(n % 4 == 1 || n % 4 == 2) {
		x = $("html, body").width() - $(window).width()
	}
	$("html, body").animate({scrollLeft: x, scrollTop: y}, speed, "swing");
	
	var d = jQuery.Deferred();
	d.then( $.get("./") ).then(wait_time(speed, n)).done( pusan )//再帰ループ
	d.resolve();
	return d.promise();
}
</script>
<style type="text/css">
html {
	width: 200%;
	height: 200%;
	font-size: 200%;
	position: relative;
}
a {
	color: blue;
	text-decoration: none;
}
a:hover, a:active {
	color: orange;
	text-decoration: none;
}
p {
	width: 5em;
	height: 1em;
	display: block;
	font-size: 1000%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
</style>
</head>
<body>
<a onClick="pusan(0);">スタート</a>
<p>
こんな感じ
</p>
</body>
</html>