글쓴이:Javascript
색상고르기 입니다.
익스6에서만 테스트해봤습니다.
넷스7에선 안돌아갔습니다. 실력이 없어서요..
슬라이드 부분만 떼네서 슬라이드바 컨트롤로 쓸수도 있습니다.
에디터 눌러서 에디터 켠다음
아래의 소스를 복사해서 붙여넣은다음 저장해서 보세여..ㅋㅋ
var isMouseDown = false; //마우스가 눌렸는지 저장
var elemnt; //이동할 엘리먼트
var setColor; //이동할 엘리먼트
var downX, downY; //마우스가 눌려진 위치
var hexChars = "0123456789ABCDEF"; //10진수>16진수 변환에 쓸 문자열
function getHex(dec) //10진수 16진수 변환
{
temp1 = dec % 16; //16으로 나눈 나머지 저장
temp2 = (dec - temp1) / 16;
temp3 = hexChars.charAt(temp2) + hexChars.charAt(temp1);
//각 위치의 문자열 결합
return temp3; //16진수 반환
}
function mDrag() //마우스가 눌리고 나서 실제로 이동
{
if(isMouseDown && 0 <= (afterX + event.clientX - downX) && 255 >= (afterX + event.clientX - downX)) //마우스가 눌렸다면
{
elemnt.style.left = afterX + event.clientX - downX;
//드래그전 엘리먼트 X좌표+현재 마우스X좌표-드래그전 마우스 눌린 X좌표
if(setColor == "setRed") document.getElementById('setRed').innerHTML = afterX + event.clientX - downX; //레드 수치 innerHTML
if(setColor == "setGreen") document.getElementById('setGreen').innerHTML = afterX + event.clientX - downX; //그린 수치 innerHTML
if(setColor == "setBlue") document.getElementById('setBlue').innerHTML = afterX + event.clientX - downX; //블루 수치 innerHTML
document.getElementById('colorView').style.backgroundColor =
getHex(document.getElementById('setRed').innerHTML) +
getHex(document.getElementById('setGreen').innerHTML) +
getHex(document.getElementById('setBlue').innerHTML);
//미리보기 배경색을 RGB16진수로 변경
}
if(isMouseDown && 0 > (afterX + event.clientX - downX)) //0밑
{
elemnt.style.left = "0";
//드래그전 엘리먼트 X좌표+현재 마우스X좌표-드래그전 마우스 눌린 X좌표
if(setColor == "setRed") document.getElementById('setRed').innerHTML = 0; //레드 수치 innerHTML
if(setColor == "setGreen") document.getElementById('setGreen').innerHTML = 0; //그린 수치 innerHTML
if(setColor == "setBlue") document.getElementById('setBlue').innerHTML = 0; //블루 수치 innerHTML
document.getElementById('colorView').style.backgroundColor =
getHex(document.getElementById('setRed').innerHTML) +
getHex(document.getElementById('setGreen').innerHTML) +
getHex(document.getElementById('setBlue').innerHTML);
//미리보기 배경색을 RGB16진수로 변경
}
if(isMouseDown && 255 < (afterX + event.clientX - downX)) //255위
{
elemnt.style.left = "255";
//드래그전 엘리먼트 X좌표+현재 마우스X좌표-드래그전 마우스 눌린 X좌표
if(setColor=="setRed") document.getElementById('setRed').innerHTML = 255; //레드 수치 innerHTML
if(setColor=="setGreen") document.getElementById('setGreen').innerHTML = 255; //그린 수치 innerHTML
if(setColor=="setBlue") document.getElementById('setBlue').innerHTML = 255; //블루 수치 innerHTML
document.getElementById('colorView').style.backgroundColor =
getHex(document.getElementById('setRed').innerHTML) +
getHex(document.getElementById('setGreen').innerHTML) +
getHex(document.getElementById('setBlue').innerHTML);
//미리보기 배경색을 RGB16진수로 변경
}
return false;
}
function mDown() //버튼 옮길 준비
{
if(event.srcElement.className == "btn") //엘리먼트 클래스가 btn이라면
{
isMouseDown = true; //마우스가 눌린것으로 저장
elemnt = event.srcElement; //elemnt에 눌린 엘리먼트 저장
afterX = elemnt.style.pixelLeft; //드래그전 엘리먼트 X좌표를 afterX에 저장
downX = event.clientX; //드래그전 마우스 눌린 X좌표를 downX에 저장
setColor = event.srcElement.getAttribute('handlefor'); //setColor에 handlefor 애트리뷰트 저장
document.onmousemove = mDrag; //mDrag 핸들러
}
}
document.onmousedown = mDown; //도큐먼트 마우스 눌리면 mDown핸들러
document.onmouseup = new Function("isMouseDown=false");
//마우스 업
RED : 0
GREEN : 0
BLUE : 0
|