마우스로 개체 이동 및 가로 크기 변화(좌우 개체)에다가

지정된 크기까지 줄여주는 함수를 추가했다.

사용법은 아래와 같다.

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)

}

}

2011/11/19 11:41 2011/11/19 11:41

Trackback Address :: https://youngsam.net/trackback/1654