언뜻 복잡할거 같은데 진짜 겁나 쉬운 방법이다. 먼저 style에서 class로 정의해 준 다음 addClass와 removeClass를 사용하는 방법이다. 세상간단. 진짜 세상에서 제일 간단.
HTML
|
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="js/jquery-3.1.1.min.js"></script> //먼저 script파일을 선언해주기.
<script src="js/jquery-ui.min.js"></script> //솔직히 없어도 된다!
<style>
.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 a{
display: block;
position: absolute;
top: 0;
}/*위의 css는 이미지가 삽입되는 틀의 영역을 잡는것이다. 반드시 필요한부분!*/
.scale{
transition: all 1s;
transform: scale(1.3);
}
.smaller{
transition: all 1s;
transform: scale(1);
}
/*이 scale이라는 클래스와 smaller라는 클래스만 있으면 된다. 숫자는 언제든지 변경 가능.*/ </style>
<title>Document</title>
</head>
<body>
<div class="main">
<div class="section1">
<ul class="product">
<li>
<a href="#">
<img class="product1" src="images/1.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img class="product1" src="images/2.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img class="product1" src="images/3.jpg" alt="">
</a>
</li>
</ul>
</div>
</div>
<script>
$(".product li a img").mouseover(function(){
$(this).removeClass("smaller");
$(this).addClass("scale");
})
$(".product li a img").mouseleave(function(){
$(this).removeClass("scale");
$(this).addClass("smaller");
})
</script>
</body>
</html>
|
cs |
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ mouseover할때는
$(this).removeClass("smaller");
$(this).addClass("scale");
mouseleave할때는
$(this).removeClass("scale");
$(this).addClass("smaller");
이것만 하면 해결 ! ^___^
728x90
'퍼블리싱 > HTML | CSS | Javascript' 카테고리의 다른 글
| (링크) 마우스를 돋보기 처럼 쓰는 플러그인 (0) | 2017.04.02 |
|---|---|
| 마우스 오버시 이미지 크기조절 심화편! (0) | 2017.04.02 |
| google map api 사용법 (한 페이지에 다수의 구글맵 가능) (0) | 2017.04.02 |
| 버튼스타일 2 (0) | 2017.04.02 |
| 마음에 드는 버튼스타일 (0) | 2017.04.02 |