반응형

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<style type="text/css">
		#diva {
			height:2500px;
		}
		#scrollBtn1,#scrollBtn2 {
			cursor:pointer;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function(){

			$("#scrollBtn1").click(function(){
				//divb의 top의 위치 값으로 이동
				var pos=$("#divb").position().top;
				$("html, body").animate({scrollTop:pos},'slow');
			});

			$("#scrollBtn2").click(function(){
				$("html, body").animate({scrollTop:0},'slow');
			});
		});
	</script>
</head>
<body>
	<div id="diva"> 
		맨위
		<p id="scrollBtn1">[맨아래로 이동]</p>
	</div>
	<div id="divb">
		맨 아래 
		<p id="scrollBtn2">[맨위로 이동]</p>
	</div>
</body>
</html>

dd
해당 페이지 맨위와 divb(맨 아래)로 애니메이션 이동

확인:http://azit4u.phps.kr/jquery/scrollTop.html
반응형
저작자표시 비영리 변경금지

'jQuery' 카테고리의 다른 글

jQuery preventDefault();  (0) 2011.10.17
jQuery hover(), toggleClass(), toggle()  (0) 2011.10.14
jQuery css  (0) 2011.10.14
jQuery 마우스 이벤트(클릭한 버튼, 클릭한 위치) event.button, event.screenX, event.screenY  (0) 2011.10.14
jQuery bind(), unbind(), trigger()  (0) 2011.10.14
반응형
하이퍼 링크가 작동 하지않는다.


$(".roll").click(function(event) {
	event.preventDefault();
});
반응형
저작자표시 비영리 변경금지

'jQuery' 카테고리의 다른 글

jquery scrollTop(), position()  (0) 2011.10.27
jQuery hover(), toggleClass(), toggle()  (0) 2011.10.14
jQuery css  (0) 2011.10.14
jQuery 마우스 이벤트(클릭한 버튼, 클릭한 위치) event.button, event.screenX, event.screenY  (0) 2011.10.14
jQuery bind(), unbind(), trigger()  (0) 2011.10.14
반응형
hover(마우스오버시 이벤트,마우스아웃시 이벤트)

$("#button").hover(
	function() {
		$(this).addClass("hover");
	},
	function() {
		$(this).removeClass("hover");
	}
);



$("#button").hover(function(){
	$("#button").toggleClass("hover");
});

위 두 소스는 같은 결과를 출력

toggleClass() - 선택한 엘리먼트에 클래스가 이미 적용되어 있으면 해당 클래스를 제거 하고 그렇지 않으면
                       해당 클래스를 적용 한다.

toggle(handler0,handler1) - 선택한 엘리먼트에 두개 이벤트 연결 한번 실행 마다 0,1 의 핸들러 함수 실행


$("#button").toggle(
	function(){
		$(this).removeClass("hover2");
		$(this).addClass("hover");
	},
	function(){
		$(this).removeClass("hover");
		$(this).addClass("hover2");
	}
);
반응형
저작자표시 비영리 변경금지

'jQuery' 카테고리의 다른 글

jquery scrollTop(), position()  (0) 2011.10.27
jQuery preventDefault();  (0) 2011.10.17
jQuery css  (0) 2011.10.14
jQuery 마우스 이벤트(클릭한 버튼, 클릭한 위치) event.button, event.screenX, event.screenY  (0) 2011.10.14
jQuery bind(), unbind(), trigger()  (0) 2011.10.14
반응형

.css(propertyName,value) -  기본적 형태 css( 속성명 , 속성값)

$(".box").css("width","100px");

 


.css(propertyName,function(index,value) { })
   - function 사용 자신이 원하는 기능 확장 // index는 선택한 개체 순서, value 는 해당 개체의 현재 속성값


$("#inText").css("color",function(index,value) {
	if(value=="rgb(0, 0, 255)"){ //color 가 rgb(0, 0, 255) 이면 red로 변경
		return "red";
	}
});

 


.css(map) - 맵형태로 입력 {key:value}


$("#button").bind("mouseover", function() {
	$("#inText").css({
		'background':'cyan',
		'font-weight':'bold',
		'color':'blue'
	});
});
반응형
저작자표시 비영리 변경금지

'jQuery' 카테고리의 다른 글

jQuery preventDefault();  (0) 2011.10.17
jQuery hover(), toggleClass(), toggle()  (0) 2011.10.14
jQuery 마우스 이벤트(클릭한 버튼, 클릭한 위치) event.button, event.screenX, event.screenY  (0) 2011.10.14
jQuery bind(), unbind(), trigger()  (0) 2011.10.14
google jQuery 최신 버전 지원(1.버전대)  (0) 2011.10.07

+ Recent posts

티스토리툴바