<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// 효과 show() hide() toggle()
// slideDown() slideUp() slideToggle()
// fadeIn() fadeOut() fadeToggle()
// 'h1' 클릭 이벤트
$('h1').click(function () {
$(this).next().toggle('slow', function () {
alert('효과끝');
});
});
});
</script>
</head>
<body>
<h1>열기 & 닫기</h1>
<div>
<h2>제목1</h2>
<p>내용1</p>
</div>
<h1>열기 & 닫기</h1>
<div>
<h2>제목2</h2>
<p>내용2</p>
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
div, ul, li {
/* border: 1px solid red; */
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
}
img {
width: 600px;
height: 250px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../scripts/jquery.innerfade.js"></script>
<script>
$(document).ready(function () {
$('#portfolio').innerfade({
animationtype: 'slide',
speed: 'slow',
timeout: 4000,
type: 'random',
containerheight: '250px'
});
});
</script>
</head>
<body>
<div>
<ul id="portfolio">
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/kreation/good_guy__bad_guy.html">
<img src="images/ggbg.gif" alt="Good Guy bad Guy" />
</a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/kreation/whizzkids.html">
<img src="images/whizzkids.gif" alt="Whizzkids" />
</a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/printdesign/koenigin_mutter.html">
<img src="images/km.jpg" alt="Königin Mutter" />
</a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/webdesign/rt_reprotechnik_-_hybride_archivierung.html">
<img src="images/rt_arch.jpg" alt="RT Hybride Archivierung" />
</a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/kommunikation/tuev_sued_gruppe.html">
<img src="images/tuev.jpg" alt="TÜV SÜD Gruppe" />
</a>
</li>
</ul>
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
div {
width: 50px;
height: 50px;
background-color: orange;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('div').click(function () {
// css(), attr() 항상 문자열로 가져옴
var width = $(this).css('width');
var height = $(this).css('height');
//alert(parseInt(width));
$(this).animate({
// css 속성명으로 값을 지정함
width: parseInt(width) + 50,
height: parseInt(height) + 50
}, 'slow');
});
});
</script>
</head>
<body>
<div></div>
</body>
</html>
'IT > jQuery' 카테고리의 다른 글
| jQuery - ajax통신, json, xml 사용 예제 (0) | 2018.11.18 |
|---|---|
| jQuery - checkbox attr과 prop의 차이 (0) | 2018.11.17 |
| jQuery - form submit 이벤트 함수, event.preventDefault() (0) | 2018.11.17 |
| jQuery - textarea keyup 이벤트 (0) | 2018.11.16 |
| jQuery - bind 이벤트 연결 (mouseover, click), 메소드 체이닝 (0) | 2018.11.16 |