제이쿼리 실무 예제
- 문제 1 : 숨겨진 사진 슬라이드하면서 보여주기
<script>
$(document).ready(function() {
$('#clickMe').click(function(){
$('#picframe').slideDown();
});
});
</script>
</head>
<body>
<div id="clickMe">Show me the the Furry Friend of the Day</div>
<div id="picframe">
<img src="images/furry_friend.jpg">
</div>
</body>
- 문제 2 :
1. 실행시 좌측 내비게이션 80% 숨기기
2. 좌측 호버시 하나씩 보이게 하기
<script>
$(document).ready(function() {
$('#navigation>li').animate({ //실행하자마자 왼쪽으로 들어감
marginLeft:-80
},1000);
$('#navigation>li').hover(function(){
i=$(this).index();
$(this).stop().animate({
//stop: 이전 실행되던 작업(다른 버튼들 slideout) 중지
marginLeft:0
},'fast');
},function(){
i=$(this).index();
$(this).stop().animate({
marginLeft:-80
},'fast');
});
});
</script>
<body>
<div class="header"></div>
<div class="scroll"></div>
<ul id="navigation">
<li class="home"><a href="" title="Home"></a></li>
<li class="about"><a href="" title="About"></a></li>
<li class="search"><a href="" title="Search"></a></li>
<li class="photos"><a href="" title="Photos"></a></li>
<li class="rssfeed"><a href="" title="Rss Feed"></a></li>
<li class="podcasts"><a href="" title="Podcasts"></a></li>
<li class="contact"><a href="" title="Contact"></a></li>
</ul>
</body>
- 문제 3-1 :
1. 처음 실행할 때 상위메뉴만 보이기
2. 클릭시 하위메뉴 slidedown
3. 다른 메뉴 클릭시 아까 선택한 메뉴 slideup
<body onload="init(0)">
<ul id="navi">
<li class="group">
<div class="title">회사소개</div>
<ul class="sub">
<li><a href="#">CEO 인사말</a></li>
<li><a href="#">회사 연혁</a></li>
<li><a href="#">찾아오시는 길</a></li>
</ul>
</li>
<li class="group">
<div class="title">제품정보</div>
<ul class="sub">
<li><a href="#">냉장고</a></li>
<li><a href="#">세탁기</a></li>
<li><a href="#">에어컨</a></li>
</ul>
</li>
<li class="group">
<div class="title">커뮤니티</div>
<ul class="sub">
<li><a href="#">자료실</a></li>
<li><a href="#">공지사항</a></li>
</ul>
</li>
</ul>
<script>
$('.sub').hide();
$('.title').click(function(){
$('.sub').slideUp();
$(this).next().slideDown();
});
</script>
- ※ <body onload="init(0)">
=> body 실행 다 된 상태에서 init 함수 호출, 0 매개변수 전달
<script>
$('.sub').hide();
$('.title').click(function(){
$('.sub').slideUp();
$(this).next().slideDown();
});
function init(pos){
setTimeout(function(){
$('.sub').slideUp();
$('#navi>li').eq(pos).find('.sub').slideDown();
},1000);
}
</script>
=> 홈페이지 방문후 몇 초 지나면 첫번째 상위메뉴 slidedown됨
+ 같은 상위메뉴 누를 때 반응 안 하도록
=>
$('.sub').hide();
var oldI=-1,i;
$('.title').click(function(){
i=$(this).parent().index();
if (i!=oldI){ //똑같은 메뉴 클릭하면 실행X
$('.sub').slideUp();
$(this).next().slideDown();
oldI=i;
}
- 문제 3-2 :
1. 실행시 상위메뉴만 보임
2. 호버시 하위메뉴 보엿다가 사라짐
$('.group').hover(function(){
$(this).find('.sub').slideDown();
},function(){
$(this).find('.sub').slideUp();
});
- 문제 4 :
홈메뉴 클릭 시 오른쪽으로 나오기
호버 시 img 환하게
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<script>
$(document).ready(function() {
var on=false;
$('#home').click(function(){
on=!on;
if(on){
$('#menu').animate({
left:50
},1000);
} else{
$('#menu').animate({
left:-666
},1000);
}
});
$('#menu li').hover(function(){
$(this).animate({
opacity:1
},300);
},function(){
$(this).animate({
opacity:0.2
},300);
});
});
</script>
|
cs |
- 문제 5 :
1. 상위메뉴만 보임
2. 호버했을 때 하위메뉴 보이게 함 & 상위메뉴 배경 회색
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<body>
<div id="menuArea">
<ul id="navi">
<li id="menu1">
<a href="#">회사소개</a>
<ul class="sub">
<li><a href="#">ceo 인사말</a></li>
<li><a href="#">회사 연혁</a></li>
<li><a href="#">찾아오시는 길</a></li>
</ul>
</li>
<li id="menu2">
<a href="#">제품 소개</a>
<ul class="sub">
<li><a href="#">냉장고</a></li>
<li><a href="#">에어컨</a></li>
<li><a href="#">세탁기</a></li>
</ul>
</li>
<li id="menu3">
<a href="#">커뮤니티</a>
<ul class="sub">
<li><a href="#">submenu0301</a></li>
<li><a href="#">submenu0302</a></li>
<li><a href="#">submenu0303</a></li>
</ul>
</li>
</ul>
</div>
<script>
$('.sub').hide();
$('#navi>li').hover(function(){
$(this).find('.sub').stop(true,true).fadeIn(100); //상위메뉴 빠르게 호버 시 오류 발생
//=> queue 비우고 원래 위치로 돌아오게 해 오류 방지
$(this).find('a:first').addClass('on'); //css에 배경스타일 추가한 클래스
},function(){
$(this).find('.sub').fadeOut(100);
$(this).find('a:first').removeClass('on');
});
</script>
</body> |
cs |
- 문제 6 : 호버 시 div를 모서리 바깥으로 이동시켜 사라지게 하고 div 뒤 텍스트 보이게 하기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<body>
<div id="box">
<ul>
<li id="menu1">
메롱!
<div class="pagecurl">넌누구냐?</div>
</li>
<li id="menu2">
over
<div class="pagecurl">previous over</div>
</li>
<li id="menu3">
over
<div class="pagecurl">previous over</div>
</li>
<li id="menu4">
over
<div class="pagecurl">previous over</div>
</li>
<li id="menu5">
over
<div class="pagecurl">previous over</div>
</li>
</ul>
</div>
<script>
$('ul li').hover(function(){
$(this).find('.pagecurl').stop().animate({
left:-100,
top:100
},'fast');
},function(){
$(this).find('.pagecurl').stop().animate({
left:0,
top:0
},'fast');
});
</script>
</body> |
cs |
'Programming > 국비학원' 카테고리의 다른 글
| 220721 - 제이쿼리 - 이미지 슬라이드 구현 (0) | 2022.07.22 |
|---|---|
| 220720 - 제이쿼리 - 실습 예제, 플러그인 예제 (0) | 2022.07.21 |
| 220718 - 제이쿼리 - 애니메이션 큐(queue), jquery-ui 플러그인 (0) | 2022.07.19 |
| 220715 - 제이쿼리 - 애니메이션 (기본 시각 효과, 사용자 정의 효과) (0) | 2022.07.17 |
| 220714- 제이쿼리 - 이벤트 관련 메소드 (trigger, clearTimeout/clearInterval, preventDefault, stopPropagation, on, 마우스, 키보드, 윈도우) (0) | 2022.07.17 |