레이어 스부적스부적 이동 스크립트
<script>
/*
//
// 레이어 스부적스부적 이동 스크립트.
//
// by hanulis(hanulis@gmail.com). 2007.
//
// usage: mino.layer.moveSmooth(obj,x,y);
//
// 설명: obj를 x,y 위치로 스부적 이동시킴. obj의 style중 position:absolute가 추가되어있어야 합니다.
//
// 예제: <div id="test" style="position:absolute">aaa</div>
// <script>mino.layer.moveSmooth(document.getElementById("test"),200,400); </ script>
//
// 보너스: x혹은 y축만 움직이고 싶을때, 움직이지 않을축을 null로 지정합니다.
//
// 예제: <script>mino.layer.moveSmooth(document.getElementById("test"),null,400); </ script>
//
*/
var mino={}
var _mino_layer_smooth_obj=null;
var _mino_layer_smooth_doing=false;
mino.layer={
xy:function(obj) {
if(document.getBoxObjectFor) { //firefox
try {
var tempXY=document.getBoxObjectFor(obj);
} catch(e) {return [0,0,obj.offsetWidth,obj.offsetHeight]}
return [tempXY.x,tempXY.y,obj.offsetWidth,obj.offsetHeight];
} else if(obj.getBoundingClientRect) { //internet Explorer
var tempXY=obj.getBoundingClientRect();
return [(tempXY.left+document.body.scrollLeft),(tempXY.top+document.body.scrollTop),obj.offsetWidth,obj.offsetHeight];
} else return false;
},
moveSmooth:function(obj,x,y) {
if(!_mino_layer_smooth_obj) _mino_layer_smooth_obj=obj;
if(arguments[3]==undefined && _mino_layer_smooth_doing) {
return;
}
else _mino_layer_smooth_doing=1;
var loc=mino.layer.xy(_mino_layer_smooth_obj);
if(x!=null) {
if(Math.abs(Math.abs(loc[0])-Math.abs(x))<10) {
obj.style.left=x;
var xc=1;
} else {
obj.style.left=parseInt(loc[0]+(x-loc[0])/3);
}
} else var xc=1;
if(y!=null) {
if(Math.abs(Math.abs(loc[1])-Math.abs(y))<10) {
obj.style.top=y;
var yc=1;
} else {
obj.style.top=parseInt(loc[1]+(y-loc[1])/3);
}
} else var yc=1;
if(xc && yc) {
_mino_layer_smooth_doing=0;
_mino_layer_smooth_obj=null;
return;
}
setTimeout('mino.layer.moveSmooth(_mino_layer_smooth_obj,'+x+','+y+',"s")',10);
}
}
</script>
<div id="k" style="background-color:#eeffe0;position:absolute;width:200;height:200;border:1px solid #000000"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<input type=button value="move(0,0)" onclick="mino.layer.moveSmooth(document.getElementById('k'),0,0)">
<input type=button value="move(-200,-200)" onclick="mino.layer.moveSmooth(document.getElementById('k'),-200,-200)">
<input type=button value="move(400,400)" onclick="mino.layer.moveSmooth(document.getElementById('k'),400,400)">
<input type=button value="move(300,300)" onclick="mino.layer.moveSmooth(document.getElementById('k'),300,300)">
<input type=button value="move(500,null)" onclick="mino.layer.moveSmooth(document.getElementById('k'),500,null)">
<input type=button value="move(null,500)" onclick="mino.layer.moveSmooth(document.getElementById('k'),null,500)">
[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]
|
댓글을 작성하시려면 로그인이 필요합니다.