ひらい ぶらり Hi-Library

ぷろぐらみんぐについて。ときどきどうでもいいことについて。

怪しげなJavaScript解析(1)

JavaScript

http://rapa.jp/w_3/bonji.html

　どうやらサイトそのものを

でくくっちゃって、ツールバーもどきはなぜかでくくれている。
　
のpositionプロパティをabsoluteにして、mouseMoveイベントを取ってきて、　topとleftを操作して動かしている模様。それだけでこうなるのかな？
　全体に的にごちゃごちゃ色々と書かれているけれども、それはどうやら表示する広告をセットするためのようだ。
　とはいえ、FireBugLiteで無理やり中身をのぞいてもそれぐらいしかわからなかった。

と思いきや。

BODY {
border: 0px;
}

として、エレメントをドラッグするようにしてるだけでした。
後はエレメントの位置によって、ツールバーを上部にくっつけるか下部にくっつけるかとか判断してやるだけでよさげ。

body {
	margin: 0px;
	border-left: 0px;
	border-top: 0px;
	border-right: 0px;
	border-bottom: 0px;
	overflow: hidden;
}

#wrap {
	border: 0px;
	overflow:hidden;
	height: 100%;
	width:	100%;
}

#menu {
	background: buttonface;
	height: 25px;
	width: 100%;
	position: absolute;
	top: 0px
	left: 0px;
	border-left: buttonface 1px solid;
	border-top: buttonface 1px solid;
	border-right: buttonface 1px solid;
	border-bottom: buttonshadow 1px solid;
	padding-left:1px;
	cursor: default;
}

#handle {
	background: buttonface;
	width:3px;
	height:20px;
	margin: 0px;
	padding-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	border-left: buttonhighlight 1px solid;
	border-top: buttonhighlight 1px solid;
	border-right: buttonshadow 1px solid;
	border-bottom: buttonshadow 1px solid;
	cursor: move;
	float:left;
}

#body {
	width: 100%;
	height: 90%;
	top:25px;
	border-left: white 2px inset;
	border-top: white 2px inset;
	border-right: white 2px inset;
	border-bottom: white 2px inset;
	overflow: auto;
	position: absolute;
	z-index: -1;
}

<body>
<div id="wrap">
	<div id="menu">
		<div id="handle">
		</div>
		<input type="text">
		<a href="http://google.com">メニュー</a>
	</div>
	<div id="body">
	</div>
</div>
</body>

こんな感じにしてやればOK.

んで、JavaScriptは

var click = false;
var dif_y = 0;
j$(function(){
	j$("#handle").bind("mousedown", clickHandle);
	j$(document).bind("mousemove", moveHandle);
	j$(document).bind("mouseup", leaveHandle);
})

function clickHandle(e) {
	click = true;
	var h_y = j$("#menu").css("top").replace("px","");
	if(h_y == "auto") {
		h_y = 0;
	}
	var m_y = e.pageY;
	dif_y   = m_y - h_y;
	j$("#menu").css({top:(e.pageY - dif_y)});
	j$("#menu").css({left:(e.pageX)});
}

function leaveHandle(e) {
	click = false;
}

function moveHandle(e) {
	if (click) {
		j$("#menu").css({top:(e.pageY - dif_y)});
		j$("#menu").css({left:(e.pageX)});
	}
}

これだけでも一応動作。
後は細かいところをつめてやるだけ。

http://www.paseo102.sakura.ne.jp/r-hirai/bar.html