반응형

jQuery로 메뉴에 효과 주기

 

<HTML>

 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
 
<div>
    <ul class="hover">
        <li>메뉴1</li>
        <li>메뉴2</li>
        <li>메뉴3</li>
        <li>메뉴4</li>
        <li>메뉴5</li>
        <li>메뉴6</li>
    </ul>
</div>

 

<jQuery> 1번 효과

 

1
2
3
4
5
 
$('.hover li').hover(function(){
	$(this).animate({paddingLeft: '+=15px'},200);
}, function(){
	$(this).animate({paddingLeft: '-=15px'},200);
});

 

 

<실행1>

 

 

마우스를 메뉴4에 올려두면 메뉴가 오른쪽으로 밀린다.

 

 

 

 

<jQuery> 2번 효과

 

1
2
3
4
5
 
$('.hover li').hover(function(){
	$(this).animate({fontSize: '+=15px'},200);
}, function(){
	$(this).animate({fontSize: '-=15px'},200);
});

 

 

<실횅2>

 

 

효과를 폰트사이즈로 두어서 메뉴3이 커지는 효과를 줄수있다.

반응형
저작자표시 비영리 변경금지

'Computer Language > Jquery' 카테고리의 다른 글

jQuery toggle(토글) 버튼  (0) 2017.07.29
jQuery (제이쿼리) 사용법  (0) 2017.07.28
반응형

toggle 버튼을 이용해서 내가 원하는 부분을 숨길 수도 있고 보이게 할 수도 있다.

 

<html>소스

 

 

1
2
3
4
5
6
7
8
 
<div>
	<div class="text1">안녕하세요!(text1)</div>
	<div id ="text2">안녕하세요!(text2)</div>
	<div><input type="button" id="show_btn" value="show"></div>
	<div><input type="button" id="hide_btn" value="hide"></div>
	<div><input type="button" id="toggle_btn1" value="toggle"></div>
	<div><input type="button" id="toggle_btn2" value="toggle2"></div>  	
</div>

 

 

html 소스코드에 보면 class, id 차이를 줬다.

 

 

이유는 밑에 설명

 

 

<실행화면>

 

 

<jQuery>소스

 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
 
$(document).ready(function(e) {
	$('#show_btn').click(function(){	//1번
		$('.text1').show();		
	})
	$('#hide_btn').click(function(){	//2번
		$('.text1').hide();		
	})
	$('#toggle_btn1').click(function(){     //3번
		if($('#text2').is(':visible'))
			$('#text2').hide();
		else
			$('#text2').show();	
	})	
	$('#toggle_btn2').click(function(){      //4번
		$('#text2').toggle('slow');
	})
	
});

 

jQuery로 버튼에 기능을 넣어 주었다.

 

jQuery 소스코드에 2번을 보면 $('hide버튼').클릭(class text1 ).숨겨라 라는 뜻이다.

 

3번은 show(), hide()기능을 조건문으로 toggle 방식을 만든것이고

 

4번은 toggle을 이용해 만든 것이다.

 

3번과 4번은 기능은 똑같지만 toggle을 사용함과 사용하지 않았을 때의 차이다

 

당연히 toggle을 사용함이 깔끔하고 좋다.

 

toggle대신 slideToggle()을 주면 슬라이드 기능이 된 toggle을 볼 수 있다.

예) $('#text2').slideToggle(1500);

 

토글 괄호 안에는 숫자나 'slow', 'fast'로 슬라이드 속도를 줄수있다.

 

text1번과 text2번을 지정할때 class 로 준 div는 '.클래스이름' 으로 주고 id 는 '#클래스이름' 으로 준다.

 

class 는 . (점)

id 는 # (샵)

 

 

 

 

반응형
저작자표시 비영리 변경금지

'Computer Language > Jquery' 카테고리의 다른 글

jQuery 메뉴 효과 hover  (0) 2017.07.30
jQuery (제이쿼리) 사용법  (0) 2017.07.28
반응형

jQuery를 사용 하려면. jQuery가 필요하겠죠

 

 

jQuery를 사용하는 방법은 두가지가 있습니다.

 

1. 주소 가져오기!

 

html 소스코드 안에

 

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

 

넣으면 됩니다.

 

2. 원본 파일 가져오기

 

제이쿼리 홈페이지( http://jquery.com/ )

 

 

 

 

빨간 상자 클릭!

 

 

 

 

압축형과 비압축형이 있는데 사용하는 데는 차이는 없습니다.

 

어떤 구조인가 소스를 보고 싶으시면 비압축형 파일을 받으시면 됩니다.

 

똑같이 html 소스코드 안에

 

<script type="text/javascript" src="jquery-3.2.1.min.js"></script>

 

넣으시면 됩니다.

 

그리고 확인 해보면 되겠죠

 

 

<!DOCTYPE html>
<html>
<head>
  <title> jQuery </title>
 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>    //1번

 <script type="text/javascript" src="js/jquery-3.2.1.js"></script>         //2번 둘중 아무거나.
  <script>
  $(document).ready(function(e) {
                  alert('Test');
              });
  </script>
</head>

<body>
</body>
</html>

 

참고)

공부용으로는 1번이 편하니 사용하면 되지만

 

 실제 사용함에서는 압축된 jQuery를 받아 경로를 설정해주는 것이

 

좀 더 빠르게 웹페이지를 불러올 수 있습니다.

 

 

반응형
저작자표시 비영리 변경금지

'Computer Language > Jquery' 카테고리의 다른 글

jQuery 메뉴 효과 hover  (0) 2017.07.30
jQuery toggle(토글) 버튼  (0) 2017.07.29

+ Recent posts

티스토리툴바