이미지를 이용한 효과 1 - 클릭하면 다른 이미지로 바뀌는 효과
imgOn.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="img_on.css" type="text/css">
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="img_on.js"></script>
</head>
<body>
<a class="image" href=""><img alt="사진1" src="../image/img01.jpg" width="300px" height="400px"></a>
<a class="image" href=""><img alt="사진2" src="../image/img02.jpg" width="300px" height="400px"></a>
<a class="image" href=""><img alt="사진3" src="../image/img03.jpg" width="300px" height="400px"></a>
<a class="image" href=""><img alt="사진4" src="../image/img04.jpg" width="300px" height="400px"></a>
</body>
</html>
imgOn.css
.image {
position: absolute;
top: 10px;
left: 10px;
}
imgOn.js
$(document).ready(function() {
$(".image").hide();
var next;
$('.image:first').fadeIn('slow');
$('.image').click(function(e) {
$(this).fadeIn('slow');
// 조건 연산자 -> 조건식 ? 참 값 : 거짓 값
next = ($(this).next().length ? $(this).next() : $('.image:first'));
// 현재 사진은 사라지고, 다음 사진 나오도록 하면서, 기본 이벤트를 무효화 한다.
$(this).fadeOut('slow');
next.fadeIn('slow');
e.preventDefault();
});
});
이미지를 이용한 효과 2
imgZoom.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="imgZoom.css" type="text/css">
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="imgZoom.js"></script>
</head>
<body>
<table>
<tr>
<td width="150px" align="center"><a href="../image/img01.jpg" class="small"><img src="../image/img01.jpg"></a><p>딸기</p></td>
<td rowspan="4" width="350px" align="center"><img src="../image/img01.jpg" class="large"></td>
</tr>
<tr>
<td width="150px" align="center"><a href="../image/img02.jpg" class="small"><img src="../image/img02.jpg"></a><p>아이유</p></td>
</tr>
<tr>
<td width="150px" align="center"><a href="../image/img03.jpg" class="small"><img src="../image/img03.jpg"></a><p>선글라스녀</p></td>
</tr>
<tr>
<td width="150px" align="center"><a href="../image/img04.jpg" class="small"><img src="../image/img04.jpg"></a><p>하지원</p></td>
</tr>
</table>
</body>
</html>
imgZoom.css
table tr td {
border: solid;
color: blue;
}
.small img {
border: none;
margin: 10px;
width: 60px;
height: 70px;
}
.large {
width: 200px;
height: 230px;
}
.hover {
color: blue;
background: cyan;
}
imgZoom.js
$(document).ready(function() {
$('td').find('p').css({ 'font-size':12, 'font-weight':'bold' });
$(".small").hover(
function() {
$(this).parent().addClass('hover');
// 이미지 파일명 얻기
var imgname = $(this).attr('href');
$(".large").fadeTo("slow", 0, function() {
$(".large").attr('src', imgname);
}).fadeTo("slow", 1); // 투명도 0에서 1로 바뀜
},
function() {
$(this).parent().removeClass('hover');
}
);
});
// fadeTo(duration, opacity, [erasing], [callback])
// duration: 작동시간-숫자가 클수록 느림 또는 'fast' / 'slow'
// opacity: 투명도
// erasing: 효과
// callback: 효과 완료 후, 수행할 함수
'Study > HTML5,CSS,JQuery' 카테고리의 다른 글
| [HTML5/CSS3/JQUERY] input : 자료입력 example (0) | 2019.05.27 |
|---|---|
| [HTML5/CSS3/JQUERY] meter : 문자 입력 수에 따른 progress example (0) | 2019.05.27 |
| [HTML5/CSS3/JQUERY] table : 테이블 example (0) | 2019.05.27 |
| [HTML5/CSS3/JQUERY] menu : 메뉴 example (0) | 2019.05.22 |
| [HTML5/CSS3/JQUERY] effect : 효과 이벤트 example (0) | 2019.05.22 |
