열심히 끝까지
디바이스 융합 자바(Java) day34 - 애니메이션 그래프,토클 이용하여 사진 펼치고 접기,스와이프(상하/좌우), 참고할 플러그인 본문
디바이스 융합 자바(Java)기반 풀스택 개발자 양성과정(수업내용)
디바이스 융합 자바(Java) day34 - 애니메이션 그래프,토클 이용하여 사진 펼치고 접기,스와이프(상하/좌우), 참고할 플러그인
노유림 2022. 7. 28. 18:05[오늘 수업]
>> 애니메이션 그래프(이동하는 그래프)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이동하는 그래프</title>
<style type="text/css">
*{
margin:1px;
}
body{
overflow:hidden;
}
#box1{
height:100px;
background-color:coral;
transform:translateX(-97%);
transition:all 1s;
}
#box2{
height:100px;
background-color:lightblue;
transform:translateX(97%);
transition:all 1s;
}
#box1.on, #box2.on{
transform:translateX(0);
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("button:eq(0)").on("click",function(){
$("#box1").toggleClass("on");
})
$("button:eq(1)").on("click",function(){
$("#box2").toggleClass("on");
})
$("button:eq(2)").on("click",function(){
$("button:eq(0)").trigger("click");
$("button:eq(1)").trigger("click");
})
});
</script>
<div id = 'box1'></div>
<div id = 'box2'></div>
<button>액션1</button>
<button>액션2</button>
<button>액션3</button>
</body>
</html>
>> 과제
>> 토글 이용한 사진 열고 접기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>예제풀이</title>
<style type="text/css">
*{
margin:3px;
}
.box{
width:152px;
height:152px;
border:5px solid lightblue;
display:none;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("button:eq(0)").on("click",function(){
$(".box").toggle("medium");
})
});
</script>
<button>버튼</button>
<div class="box"><img alt="주사위영상" src="images/movegif.gif"></div>
</body>
</html>
>> 스와이프
>> 단독으로 사용 불가
: swiperjs 사용
: 검색창에 스와이프 치면 뜸
링크 : https://swiperjs.com/get-started
다음의 CDN 사용 가능
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
1. 플러그인 분석 f12 로 분석
2. demo 있을 것
>> 상하 스와이프
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스와이퍼</title>
<style type="text/css">
.swiper {
width: 600px;
height: 300px;
}
</style>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
</head>
<body>
API 외부 모듈
플러그인(위젯) JS로 완성된 모듈
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
<script type="text/javascript">
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
</body>
</html>
>> 좌우 스와이프
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<!-- Link Swiper's CSS -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1
<img alt="선입선출스케줄링" src="images/선입선출스케줄링.JPG">
</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</body>
</html>
>> 참고하면 좋은 플러그인
- lightbox
: 별도의 갤러리창
: lightbox script
: css에 주어지는 기본 버튼 존재
>> 파일에 따로 올려 놓을 테니
포맷해서 지웠을 때 참고할 것
- 블럭플러그인
>> 강사님의 html도 올려놓을 것