마우스로 개체 이동 및 가로 크기 변화(좌우 개체)에다가
지정된 크기까지 줄여주는 함수를 추가했다.
사용법은 아래와 같다.
e_resize('rightview','leftview','right',400)
function e_resize(leftobjid,rightobjid,direction,limit)
수정 : 가속도 추가 및 함수 간결화
가속도 추가 - 처음엔 빠르다가 나중엔 느림
함수 간결화 - 입력 값을 6개에서 4개로 줄임
입력 값 감소로 인한 오류 발생 -> clreaTimeout 추가
var move=false
var x=0,y=0
function movespan(e){
if(move && movingspanobj!=null){
if(e){
//불여우용
x=e.pageX
y=e.pageY
}
else{
//ie용
x=window.event.clientX
y=window.event.clientY
}
try{
document.selection.empty()
}
catch(e){
window.getSelection().removeAllRanges();
}
//세로 이동
movingspanobj.style.top=y-distance_y
//movingspanobj.style.top=y-20
//가로 이동
movingspanobj.style.left=x-distance_x
//movingspanobj.style.left=((x-movingspanobj.offsetWidth/2)-150)
}
}
function e_resizespan(e){
if(move && movingspanobj!=null){
if(e){
//불여우용
x=e.pageX
}
else{
//ie용
x=window.event.clientX
}
try{
document.selection.empty()
}
catch(e){
window.getSelection().removeAllRanges();
}
//가로 이동
movingspanobj.style.left=x-distance_x
//movingspanobj.style.left=((x-movingspanobj.offsetWidth/2)-150)
var templeftwidth=leftspanwidth-(first_x-x)
var temprightwidth=rightspanwidth+(first_x-x)
//너비 변화
leftspanobj.style.width=templeftwidth
rightspanobj.style.width=temprightwidth
//내부 span 크기 조절
var objs=leftspanobj.getElementsByTagName('span')
for(var i=objs.length;i--;){
objs[i].style.width=templeftwidth
}
objs=rightspanobj.getElementsByTagName('span')
for(var i=objs.length;i--;){
objs[i].style.width=temprightwidth
}
//내부 img 크기 조절
objs=leftspanobj.getElementsByTagName('img')
for(var i=objs.length;i--;){
objs[i].style.width=templeftwidth
}
objs=rightspanobj.getElementsByTagName('img')
for(var i=objs.length;i--;){
objs[i].style.width=temprightwidth
}
}
}
var distance_x,distance_y,movingspanobj,leftspanobj,rightspanobj,leftspanwidth,rightspanwidth,first_x
var e_resize_timeout
document.onmousedown=new Function('move=true')
document.onmouseup=new Function('move=false;movingspanobj=null')
function movethis(spanobj){
if(window.event){
//ie용
x=window.event.clientX
y=window.event.clientY
}
else{
//불여우용
x=e.pageX
y=e.pageY
}
movingspanobj=spanobj
distance_x=x-movingspanobj.offsetLeft
distance_y=y-movingspanobj.offsetTop
movingspanobj.onmousemove=movespan
}
function e_resizethis(spanobj,leftobjid,rightobjid){
if(window.event){
//ie용
x=window.event.clientX
}
else{
//불여우용
x=e.pageX
}
first_x=x
movingspanobj=spanobj
leftspanobj=document.getElementById(leftobjid)
rightspanobj=document.getElementById(rightobjid)
distance_x=x-movingspanobj.offsetLeft
leftspanwidth=leftspanobj.offsetWidth
rightspanwidth=rightspanobj.offsetWidth
movingspanobj.onmousemove=e_resizespan
}
function e_resize(leftobjid,rightobjid,direction,limit){
clearTimeout(e_resize_timeout)
var movesize=0
leftspanobj=document.getElementById(leftobjid)
rightspanobj=document.getElementById(rightobjid)
if((leftspanobj.offsetWidth>limit && direction=='left') || (rightspanobj.offsetWidth>limit && direction=='right')){
if(direction=='left'){
movesize=Math.ceil(Math.abs(leftspanobj.offsetWidth-limit)/20)
leftspanobj.style.width=leftspanobj.offsetWidth-movesize
rightspanobj.style.width=rightspanobj.offsetWidth+movesize
}
else{
movesize=Math.ceil(Math.abs(rightspanobj.offsetWidth-limit)/20)
leftspanobj.style.width=leftspanobj.offsetWidth+movesize
rightspanobj.style.width=rightspanobj.offsetWidth-movesize
}
e_resize_timeout=setTimeout('e_resize("'+leftobjid+'","'+rightobjid+'","'+direction+'",'+limit+')',10)
}
}