JQuery 에 대한 간단한 설명을 드렸는데요,
이번에는 가장 간단하게 JQuery 를 이용해서 주로 퀵메뉴에 쓰이는 Floating Layer 를 한번 구현해 보겠습니다.
우선 <head></head> 사이에
<script type="text/javascript" src="/해당 디렉토리/jquery.js"></script> 또는
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
이렇게 입력해 주시고,
<script type="text/javascript">
$(document).ready(function(){
var currentPosition = parseInt($(".float").css("top"));
$(window).scroll(function() {
var position = $(window).scrollTop(); // 현재 스크롤바의 위치값을 반환합니다.
$(".float").stop().animate({"top":position+currentPosition+"px"},1000); //여기서 1000은 속도입니다. 값이 작을수록 빨리 움직입니다.
});
});
</script>
위와 같은 자바 스크립을 입력해 줍니다.또는 외부에서 저장해서 불러와도 됩니다.여기서 보면 클래스 명을 .float 라고 지정해 주었는데 CSS 에서 아래와 같이 지정해 줍니다.
.float {position:absolute; top:20px; left:5px;}
이렇게 하면 위에서 부터 20픽셀, 왼쪽에서 5픽셀 떨어진 위치에서 브라우저의 스크롤 따라 레이어가 움직입니다.
HTML 내에서는
<div class="float">
내용
</div>
라고 해주면 됩니다.
여기서 보면 레이어의 위치가 왼쪽 기준으로 만들어져 있습니다.
하지만 보통 퀵메뉴는 오른쪽에 위치해 있거나, 사이트가 중앙정렬로 디자인 되어 있을 경우에는 문제가 됩니다.
position:absolute;top:10px;left:50%;z-index:100;margin-left:404px;
위와 같이 .float의 내용을 바꿔주면 중앙에서부터 오른쪽으로 레이어가 배치됩니다.
이게 가장 유용한 CSS 라고 볼 수 있겠지요.
'웹 & IT' 카테고리의 다른 글
| 드림위버 CS5의 새로운 특징 (0) | 2010.04.14 |
|---|---|
| [경고]로그인 정보 빼돌리는 악성코드 유행 (0) | 2010.04.06 |
| 최강의 자바스크립 함수 JQuery (0) | 2010.02.16 |
| 세상에서 가장 쉬운 암호는?? (1) | 2010.01.22 |
| 키보드 보안 프로그램 이거 꼭 필요하나? (0) | 2010.01.18 |