Mad House™ Blog :: [펌]아토처럼 마우스로 Top 이나 Bottom으로 이동하기

아 오늘 아쉬운게 많네 미니위니 구경도중 발견했는데 본 블로그에도 적용했다.

상당히 신기하나.. 파폭에서 되는듯 싶은데 익스에서는 조금 문제가 있어

익스에서만 되는 소스로 적용했다... 본 익스로 블로그의 아무 여백에 마우스 오른클릭하고 아래로 내리면

획~하고 아래로 내려간다. 마찬가지로 위로 올리면 다시 위로 휘~익

알릭님 소스는 한번 물어봐야 자세히 알겠는데.. 이리저리 고쳐놔도.. 잘모르겠다...

이글의 출처는 미니위니이며 해당 글쓴이는 LainFox님과 알릭님이십니다..

LainFox님의 소스-파폭 지원안됨

<html>
<head>
<script>
var ContextMenu = 1;
document.oncontextmenu = MenuOff
function MenuOff() {
if(ContextMenu == 0) {
ContextMenu = 1;
return false;
}
}

function goto_top()
{
var x = document.body.scrollLeft;
var y = document.body.scrollTop;
var step = 2;

while ((x != 0) || (y != 0)) {
scroll (x, y);
step += (step * step / 100);
x -= step;
y -= step;
if (x < 0) x = 0;
if (y < 0) y = 0;
}
scroll (0, 0);
ContextMenu = 0;
}

function goto_bottom()
{
var x = document.body.scrollLeft;
var y = document.body.scrollTop;
var DocWidth = document.body.scrollWidth;
var DocHeight = document.body.scrollHeight;
var step = 2;

while ((x != DocWidth) || (y != DocHeight)) {
scroll (x, y);
step += (step * step / 100);
x += step;
y += step;
if (x > DocWidth) x = DocWidth;
if (y > DocHeight) y = DocHeight;
}
scroll (x, y);
ContextMenu = 0;
}

function mousePosition(e) {
if(event.button == 2 ) {
var start_x,start_y;
if(e) {
start_x=e.pageX;
start_y=e.pageY;
}else{
start_x=event.x;
start_y=event.y;
}

document.getElementById("wrapper").onmouseup = mousePositionDiff;
function mousePositionDiff(e) {
if(event.button == 2) {
var end_x,end_y;
var diff_x,diff_y;

if(e) {
end_x=e.pageX;
end_y=e.pageY;
}else{
end_x=event.x;
end_y=event.y;
}
diff_x = start_x - end_x;
diff_y = start_y - end_y;

if(diff_y > 30) goto_top();
if(diff_y < -30) goto_bottom();
}
}

}
}

</script>

<body>
<div id=wrapper onmousedown="mousePosition(arguments[0])" >

<img src="http://miniwini.com/miniwinis/img/img_star_small.gif" onclick="goto_bottom()" style=cursor:hand alt="꼭대기로 올라갈까요?" align=right>
 
<pre>
IE Toy 의 기능중 하나인.
오른쪽 마우스 클릭 상태로 마우스를 위로 했다가 버튼을 때면 위로 스크롤 되어 올라가고
클릭 상태로 아래로 하면 아래로 스크롤 되어 내려갑니다.

물론, 스크롤이 아닐때 마우스 오른쪽 버튼을 누르면 기본메뉴 나옵니다 ^^; (이것땜에 고생했습니다;;)

아직 파이어폭스에서 마우스 오른쪽 버튼 이벤트 인식을 어떻게 하는 지 모르겠구요
(마우스 위치는 무화님의 소스로 확인 되었는데,,, arguments[0] 이 무엇인지 모르겠습니다;;)
소스는 꽤나 지저분하고 쓸데없는 게 있을 수도 있는데, 찾아주세요 !!!!
</pre>
 
 
 
 
 
상단 오른쪽에 별을 누르면 제일 아래로 스크롤 되어 내려갑니다 .. 
하단 오른쪽의 별을 누르면 제일 위로 스크롤 되어 올라갑니다

<img src="http://miniwini.com/miniwinis/img/img_star_small.gif" onclick="goto_top()" style=cursor:hand alt="꼭대기로 올라갈까요?" align=right>

</div>
</body>
</html>

알릭님의 소스-파폭 지원됨

<html>
<head>
<script>
var ContextMenu = 1;
document.oncontextmenu = MenuOff
function MenuOff() {
if(ContextMenu == 0) {
ContextMenu = 1;
return false;
}
}

function goto_top()
{
var x = document.body.scrollLeft;
var y = document.body.scrollTop;
var step = 2;

while ((x != 0) || (y != 0)) {
scroll (x, y);
step += (step * step / 100);
x -= step;
y -= step;
if (x < 0) x = 0;
if (y < 0) y = 0;
}
scroll (0, 0);
ContextMenu = 0;
}

function goto_bottom()
{
var x = document.body.scrollLeft;
var y = document.body.scrollTop;
var DocWidth = document.body.scrollWidth;
var DocHeight = document.body.scrollHeight;
var step = 2;

while ((x != DocWidth) || (y != DocHeight)) {
scroll (x, y);
step += (step * step / 100);
x += step;
y += step;
if (x > DocWidth) x = DocWidth;
if (y > DocHeight) y = DocHeight;
}
scroll (x, y);
ContextMenu = 0;
}

function addEvent(elm, evType, fn, useCapture)
{
if (elm.addEventListener) {
 elm.addEventListener(evType, fn, useCapture);
 return true;
} else if (elm.attachEvent) {
 var r = elm.attachEvent('on' + evType, fn);
 return r;
} else {
 elm['on' + evType] = fn;
}
}

var start_x = 0;
var start_y = 0;

function mousePosition(evt) {
if (!evt) {
evt = arguments[0] ? arguments[0] : window.event;
}
if(evt.button == 2 ) {
if(evt) {
start_x = evt.pageX ? evt.pageX : evt.clientX;
start_y = evt.pageY ? evt.pageY : evt.clientY;
}else{
start_x= window.event.x;
start_y= window.event.y;
}
addEvent(document.getElementById("wrapper"), 'mouseup', mousePositionDiff, false);
}
}

function mousePositionDiff(evt) {
if (!evt) {
evt = arguments[0] ? arguments[0] : window.event;
}
if(evt.button == 2) {
var end_x,end_y;
var diff_x,diff_y;
if(evt) {
end_x = evt.pageX ? evt.pageX : evt.clientX;
end_y = evt.pageY ? evt.pageY : evt.clientY;
}else{
end_x=window.event.x;
end_y=window.event.y;
}
diff_x = start_x - end_x;
diff_y = start_y - end_y;

if(diff_y > 30) goto_top();
if(diff_y < -30) goto_bottom();
}
}
</script>

<body>
<div id=wrapper onmousedown="mousePosition(event)" >

<img src="http://miniwini.com/miniwinis/img/img_star_small.gif" onclick="goto_bottom()" style=cursor:hand alt="꼭대기로 올라갈까요?" align=right>
 
<pre>
IE Toy 의 기능중 하나인.
오른쪽 마우스 클릭 상태로 마우스를 위로 했다가 버튼을 때면 위로 스크롤 되어 올라가고
클릭 상태로 아래로 하면 아래로 스크롤 되어 내려갑니다.

물론, 스크롤이 아닐때 마우스 오른쪽 버튼을 누르면 기본메뉴 나옵니다 ^^; (이것땜에 고생했습니다;;)

파폭도 지원합니다~ ^^</pre>
 
 
 
 
 
상단 오른쪽에 별을 누르면 제일 아래로 스크롤 되어 내려갑니다 .. 
하단 오른쪽의 별을 누르면 제일 위로 스크롤 되어 올라갑니다

<img src="http://miniwini.com/miniwinis/img/img_star_small.gif" onclick="goto_top()" style=cursor:hand alt="꼭대기로 올라갈까요?" align=right>

</div>
</body>
</html>

크리에이티브 커먼즈 라이센스