|
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
<body>
<div class="main">
<div class="section1">
<ul class="product">
<li>
<a href="#">
<img class="product1" src="images/main_section1_img_01_new.jpg" alt="">
<h2><img src="images/main_section1_img_01_txt.png" alt=""></h2>
<p>알톤스포츠의 자존심을 담은 대표 브랜드</p>
</a>
</li>
<li>
<a href="#">
<img class="product1" src="images/main_section1_img_02_new.jpg" alt="">
<h2><img src="images/main_section1_img_02_txt.png" alt=""></h2>
<p>스피드를 위한 스타일리쉬 자전거</p>
</a>
</li>
<li>
<a href="#">
<img class="product1" src="images/main_section1_img_03_new.jpg" alt="">
<h2><img src="images/main_section1_img_03_txt.png" alt=""></h2>
<p>쉐보레의 공학기술이 적용된 퍼포먼스 자전거 전거전 거전거전거전거전거너</p>
</a>
</li>
</ul>
</div>
</div>
</body>
---------------------------------------------------------------------------------------------------------------------
/*css*/
.main{ padding-top:30px;}
.main .section1{width:1400px; overflow:hidden; margin:0 auto;}
.main .section1 .product li{overflow:hidden; float:left; width:320px; height:400px; margin-left:40px; position:relative;} /*여기서 overflow:hidden은 이미지 마스크 용도*/
.main .section1 .product li:first-child{width:680px; margin-left:0;}
.main .section1 .product li .product1{ height:400px;}
.main .section1 .product li h2{position:absolute; right:20px; bottom:20px;}
/*text-overflow:ellipsis; 글자가 길 때 말줄임표 …*/
.main .section1 .product li p{position:absolute; left:0; top:-50px; width:100%; background:#fff; line-height:50px; text-indent:15px; color:#333; font-weight:bold; font-size:15px; letter-spacing:-0.05em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}/*글자 내려오는 효과 위해 앱솔루트 탑-50적용*/
---------------------------------------------------------------------------------------------------------------------
//script
<script>
$(document).ready(function(){
//마우스를 올렸을 때
$('.product li').mouseenter(function(){
var num=$(this).index(); //index-순서 , 그룹요소중 몇번째 요소인지에 대한 순서값
$(this).find('p').stop().animate({top:0}); //글자가 내려옴
//크기조절
if(num==0){
$(this).find('.product1').stop().animate({'height':'540px','margin-top':'-70px','margin-left':'-120.5px'},600);
} else {
$(this).find('.product1').stop().animate({'height':'540px','margin-top':'-70px','margin-left':'-57px'},600);
}
});
//마우스를 떼었을 때
$('.product li').mouseleave(function(){
$(this).find('p').stop().animate({top:-50}); //글자 올라감
//크기원위치
$(this).find('.product1').stop().animate({'height':'400px','margin-top':'0','margin-left':'0'},600);
});
});
</script>
|
cs |
순서
1. 엘리먼트 좌상단 기준이므로 오른쪽 아래로 커짐.
2. 높이를 540px로 조절
3. 가운데 기준으로 커지게 만들어줌. (tip참고)
4. $(this).index();를 이용, console.log(num);으로 첫번째 index가 몇번째 요소인지 순서값 확인하기
5. 순서확인 후 if(num==0); <-순서값 입력해주기
tip!!
$(this).find('.product1').animate({'height':'540px'},600);
위와 같이 높이만을 주게되면 제이쿼리는 기본이 좌측상단이 기준점이기 때문에 오른쪽 대각선 방향으로 크기가 커진다.
★가운데 기준으로 크기조절 시 공식
margin-top':'-(늘어난세로길이/2), margin-left':'-(늘어난가로길이/2)
-----------------------------------------------------------------------------------------------------------------
만들으신 분이 친절하게도 주석으로 어느부분이 무얼 뜻하는지 다 써놓으셔따! ^___^
728x90
'퍼블리싱 > HTML | CSS | Javascript' 카테고리의 다른 글
| select box를 제이쿼리로 외형제어 (0) | 2017.04.02 |
|---|---|
| (링크) 마우스를 돋보기 처럼 쓰는 플러그인 (0) | 2017.04.02 |
| 마우스 오버시 이미지가 자동으로 커지고 작아지고 하는 효과! 초간단 :P (0) | 2017.04.02 |
| google map api 사용법 (한 페이지에 다수의 구글맵 가능) (0) | 2017.04.02 |
| 버튼스타일 2 (0) | 2017.04.02 |