홈으로 | 무료회원가입 | 아이디/비번찾기
추천음악방송
event - volume bar
10년 전
드래그를 이용한 또 다른 스크립트를 만들어봅시다.
볼륨바 같은건 어떨까요?

마우스로 드래그 하면서 볼륨바를 이리 저리 움직이면 그 바의 위치에 따라서
뭔가 반응하는거죠.

앞엣 글을 착실히 이해했다면 상당히 쉬운 문제입니다.
더더욱이 좌우로만 움직이는 bar 이기 때문에 y 좌표는 고려할 필요가 없으니
소스는 더더욱 간단하겠지요.

그래서 몇가지 문제를 추가해보았습니다.
- 사실 추가적인 문제라기보다는 bar 가 제대로 구현 되기 위해 꼭 필요한 기능이죠.

우선은 드래그의 범위입니다.
드래그 한다고 해서 볼륨바가 범위 없이 드래그 된다면 좀 난감하겠지요.

또 하나는 현재 볼륨바의 위치를 텍스트에 써주는겁니다.

빈 레이어를 하나 적당한 위치에 적당한 크기로 넣어줍니다.
그리고 이 레이어안에서만 bar 가 움직이도록 할겁니다.
이 레이어의 크기는 가로로 200 정도로 하지요.

bar 로 쓸만한 좋은 이미지를 찾아보니http://tagmania.net/img/guide2.gif 가 적절할듯 합니다.
이 그림의 크기는 가로로 7 이고 세로로 9 이므로 위 레이어의 크기를 200 + 9 정도로 하면
레이어 안에서 그림이 최 우측에 위치할때의 x 좌표가 200 이니까 여러 계산에 좀 편리할겁니다.

우선 바탕이 되는 레이어를 html 로 작성해볼까요??


<div id="bg" style="position:absolute;left:100;top:100;width:207;height:10;background:#999999">
</div>
<img src="http://tagmania.net/img/guide2.gif" id="bar" style="position:absolute;left:100;top:105;cursor:pointer"
ondragstart="movStart()" ondrag="mov()" />

브라우저 기준으로 100, 100 위치에 크기 209, 10 으로 넣어주었습니다.
그리고 img 태그와 스타일로 이미지를 한장 넣어주었습니다.
물론 이벤트에 연결할 스크립트 함수를 작성해야 합니다.

드래그 할 대상은 물론 이 조그마한 이미지입니다.
그리고 드래그를 위한 자바스크립트를 만들어봅시다.


function movStart()  { mvX = parseInt(event.offsetX); }
function mov()  {
    nX = parseInt(event.x);
    posX = nX - mvX;
    Obj = document.getElementById("bar");
    Obj.style.left = posX;
    }


y 좌표는 고려하지 않아도 되므로 위 두 함수가 앞전 글보다 훨씬 간단해졌습니다.
하지만 이렇게 두 함수를 작성하면 드래그 된 bar 는 레이어 범위를 벗어나도 계속 드래그가 됩니다.
그러니까 posX 의 값을 판단해서 레이어 범위를 벗어나면 그 값을 적당한 값으로 바꿔줘야 합니다.
레이어 범위를 벗어나는 posX 의 값은 100 보다 작거나 혹은 300 보다 클때입니다.
100 은 레이어가 시작하는 x 좌표이고 300 은 레이어 시작점 100 에 레이어 가로크기 200 을 더해준값이죠.
가로크기가 207 이지만 그림 위치가 200 일때 레이어 맨 뒤에 그림이 위치하므로
레이어 가로크기는 200 으로 간주해도 됩니다.

답이 나왔으니 해결은 간단하죠.

if(posX < 0) posX = 0;
if(posX > 300) posX = 300;

그리고 나서 posX 를 그림의 x 위치로 정해주면 되는거죠.
이 두 줄을 함수에 추가하면 드래그 하다가 레이어 범위를 벗어나면 드래그 되지 않습니다.



한가지 더 추가 기능을 만들어봅시다.
레이어 옆에 input 태그로 텍스트를 하나 넣어줍니다.
그리고 이 텍스트에 그림이 레이어상의 상대적인 위치를 써줍시다.
가령 그림이 레이어의 가장 왼쪽에 왔으면 0 을 써주고 레이어의 가장 오른쪽에 왔으면 200 을 써주면 되죠.

이 써줄 값은 posX 에서 100 을 빼준 값이면 됩니다.
텍스트에 써줄 것이므로 추가 되는 텍스트 역시 식별자를 적어주면 편할겁니다.
또,
레이어 옆에 텍스트가 추가 될 것이므로 style 로서 위치를 잡아주면 보기도 좋겠지요.

아래는 그럭저럭 완성된 소스입니다.




<script language="javascript">
function movStart()  { mvX = parseInt(event.offsetX); }
function mov()  {
    nX = parseInt(event.x);
    posX = nX - mvX;
    if(posX > 300) posX = 300;
    if(posX < 100) posX = 100;
    Obj = document.getElementById("bar");
    Obj.style.left = posX;
    document.getElementById("posVal").value = posX - 100;
    }
</script>
<body>
<div id="bg" style="position:absolute;left:100;top:100;width:207;height:9;background:#999999"></div>
<img src="http://tagmania.net/img/guide2.gif" id="bar" style="position:absolute;left:100;top:105;cursor:pointer"
ondragstart="movStart()" ondrag="mov()" />
<input type=text size=3 id="posVal" value="0" style="position:absolute;left:320;top:100" />
</body>

추천추천 : 509 추천 목록
번호 제목
3,025
 윈도우10 시스템파일 손상 (초간단 오류 복구방법!!)
3,024
 PHP 파일 존재 여부 파악하기(로컬 파일 존재 및 원격지 파일 존재)
3,023
 [CSS] 박스 세로 가운데 중앙 정렬 6가지
3,022
 CSS Layout 수평 & 수직 정렬
3,021
 여러 도메인들 간 쿠키 공유하기
3,020
 태그 사이에 있는 텍스트를 추출
3,019
 [JQuery] textbox focus on off일때 숫자 콤마 보여주기
3,018
 쿠키 생성,가져오기,삭제
3,017
 사용자 함수 모음
3,016
 마우스,키보드 제한 ( 오른쪽클릭,드래그,영역선택등..)
3,015
 [HTML5] <video> - DOM으로 제어하기
3,014
 HTML5 video 태그에서 영상 좌우반전
3,013
 PHP - 특정 태그 및 문자열 추출, 제거
3,012
 [PHP] define과 defined의 차이
3,011
 우클릭 완벽차단 스크립트
3,010
 iframe 높이 100% 맞추기
3,009
 curl 함수를 이용한 HTTP REFERER 변경
3,008
 윈도우10 시스템 파일 및 Dism 검사
3,007
 텍스트 줄바꿈, 글자자르기 CSS
3,006
 jQuery Mobile에서 유용한 코드 10가지.
3,005
 [PHP] dirname()함수와 $_SERVER 관련 상수들
3,004
 [PHP] 파일 크기, 사이즈 불러오는 함수, filesize()
3,003
 [jQuery] jQuery Quick API
3,002
 [ transition ] 링크 hover 색상 변화 속도 조절
3,001
 PHP 5.3.0 에서 사라진 함수들 대체
목록
뮤직트로트 부산광역시 부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.