728x90
반응형
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
//마지막 스크롤 TOP 위치
var lastScrollY = 0;
$(document).ready(function () {
//setInterVal(사용할 함수, 1/1000초) 즉 quick함수를 1/1000초마다 실행
setInterval(quick,1);
});
function quick() {
//현재 스크롤바 top 위치, .scrollTop() - 선택한 element의 scroll 가능한 영역에서 가장 위쪽 위치
currentY = $(window).scrollTop();
//위치가 틀린 경우
if(currentY != lastScrollY) {
//percent=움직임속도 * (현재 scrollTop위치) - (마지막 scrollTop위치)
percent = 0.1 * (currentY - lastScrollY);
//percent가 0보다 크면 수를 올림 작으면 수를 내림.
percent = ( percent > 0 ? Math.ceil(percent) : Math.floor(percent) );
//quick의 style:top을 현재의 top에서 percent를 더한 값(음수라면 빼지겠지?)으로 바꿔준다.
$("#quick").css("top", parseInt($("#quick").css("top")) + percent);
//현재 위치를 lastScrollY에 저장해준다.
lastScrollY = lastScrollY + percent;
}
//현재 ((윈도우넓이/2) +480) 을 left로 지정
$("#quick").css("left",($(window).width() / 2 ) + 480);
}
</script>
</head>
<body>
<div style="height: 2400px;"></div>
<div id="quick" style="position: absolute; top: 200px; border:solid 3px #336699; width:150px; height:150px;">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
//마지막 스크롤 TOP 위치
var lastScrollY = 0;
$(document).ready(function () {
//setInterVal(사용할 함수, 1/1000초) 즉 quick함수를 1/1000초마다 실행
setInterval(quick,1);
});
function quick() {
//현재 스크롤바 top 위치, .scrollTop() - 선택한 element의 scroll 가능한 영역에서 가장 위쪽 위치
currentY = $(window).scrollTop();
//위치가 틀린 경우
if(currentY != lastScrollY) {
//percent=움직임속도 * (현재 scrollTop위치) - (마지막 scrollTop위치)
percent = 0.1 * (currentY - lastScrollY);
//percent가 0보다 크면 수를 올림 작으면 수를 내림.
percent = ( percent > 0 ? Math.ceil(percent) : Math.floor(percent) );
//quick의 style:top을 현재의 top에서 percent를 더한 값(음수라면 빼지겠지?)으로 바꿔준다.
$("#quick").css("top", parseInt($("#quick").css("top")) + percent);
//현재 위치를 lastScrollY에 저장해준다.
lastScrollY = lastScrollY + percent;
}
//현재 ((윈도우넓이/2) +480) 을 left로 지정
$("#quick").css("left",($(window).width() / 2 ) + 480);
}
</script>
</head>
<body>
<div style="height: 2400px;"></div>
<div id="quick" style="position: absolute; top: 200px; border:solid 3px #336699; width:150px; height:150px;">
스크롤배너
</div>
</body>
</html>
</body>
</html>
728x90
반응형
'JQUERY' 카테고리의 다른 글
| jquery, jstree 사용. 자식노드 선택시 부모노드 선택하는 스크립트 (0) | 2014.08.08 |
|---|---|
| jquery를 이용한 input readonly 및 disable 구현 (0) | 2014.08.08 |
| [jQuery] ajaxSubmit - 심플한 ajax 통신 (1) | 2014.06.24 |
| ACE-T's JS Part 03. Jquery 기초를 배워봅시다! (0) | 2014.06.24 |
| [jQuery] 별점 플러그인 (0) | 2014.06.11 |
| [Jquery]따라다니는 설명창 (0) | 2014.06.11 |
| [Jquery] 검색어 하이라이트, 색상 변경 (0) | 2014.06.11 |
| [jQuery selectBox]자바스크립트 onchange 를 jquery에서는? (0) | 2014.06.11 |
nineDeveloper
안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!