Harogi's Web Study :: 레이어 드래그 + 투명효과

레이어 드래그 + 투명효과

JavaSCript 2008/03/24 16:51

미리보기 -> http://harogi.net/jsext/test.html

<HTML>
<HEAD>
<TITLE> Png 테스트 </TITLE>

var distX = changeInt(evt.clientX) - x;
var distY = changeInt(evt.clientY) - y;
var Xp = (changeInt(sElem.style.left) + distX) ;
sElem.style.left =Xp+'px';
var Yp = (changeInt(sElem.style.top) + distY) ;
sElem.style.top = Yp+'px';

x = changeInt(evt.clientX);
y = changeInt(evt.clientY);
if(Xp < limitLeftX )sElem.style.left = limitLeftX;
if(Xp >= limitRightX )sElem.style.left = limitRightX;
if(Yp < limitTop ) sElem.style.top = limitTop;
if(Yp >= limitBottom ) sElem.style.top = limitBottom;
return false;
}
}
function stop_bubble(evt){
if(window.event){
window.event.returnValue = true;
}else{
evt.stopPropagation();
evt.preventDefault()
}
}
//------------------- 이벤트 등록
if (!document.all){
//FF도 될 수 있도록
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=mlayer_down;
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = mlayer_move;
document.captureEvents(Event.MOUSEUP);
document.onmouseup = mlayer_up;
}else{
document.onmousedown = mlayer_down;
document.onmousemove = mlayer_move;
document.onmouseup = mlayer_up;
}
</script>
</HEAD>
<BODY>
<img src="http://harogi.net/jsext/test.png" class="drag">
컨텐츠내용
컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 
컨텐츠내용컨텐츠내용컨텐츠

컨텐츠내용컨텐츠내용컨텐츠 컨텐츠내용컨텐츠내용컨텐츠 
컨텐츠내용컨텐츠내용컨텐츠 
컨텐츠내용컨텐츠내용컨텐츠 
</BODY>
</HTML>

출처 : http://www.mins01.com/20070305/m_board/tech.php?b_id=tech&type=read&b_idx=238&page=1&sh1_ta=b_title&sh1_str=%EB%A0%88%EC%9D%B4%EC%96%B4&period=1095

여기에 제가 원작자에겐 죄송하게도 좋은 소스에 약간 난잡하게 몇가지 기능을 추가했습니다.
소스정리가 필요...ㅡ,ㅡ;;; 일단 IE6 // FF 에서는 잘 되더군요.

이올린에 북마크하기(0)

이올린에 추천하기(0)

'JavaSCript' 카테고리의 다른 글

자바스크립트의 특징 (1)	2008/04/02
@cc_on (0)	2008/03/24
레이어 드래그 + 투명효과 (2)	2008/03/24
자바스크립트 에러 출력방지 (0)	2008/03/13
이미지 미리보기 스크립트 (0)	2008/03/13
스크롤링 (0)	2008/03/13