HTML, CSS, JS 를 15일 동안 학습하고 어느 정도 활용할 수 있는 수준이 되어
이를 활용하여 원하는 페이지를 구현해보고자 토이 프로젝트를 진행하였다.
✶ 주제 : 영화관 홈페이지
- 팝업 페이지 : 메가박스
- 메인 홈페이지 : CGV
✶ 팝업 페이지
*팝업 페이지 구현 기능
1. 이미지 자동 전환 및 페이징 태그 구현
2. 자동 스와이프 진행 중 페이징 태그 클릭 시, 해당 순서의 이미지로 이동 및 해당 순서부터 슬라이드 진행 기능
3. 스와이프 정지 및 실행 기능
4. 정지 상태에서 페이지 이동 및 재실행 시 해당 순서부터 자동 스와이프 진행 기능
5. 체크 박스를 클릭하여 팝업창 종료 시, 당일 자정 기한인 쿠키를 생성하여 페이지를 재방문 또는 새로고침 시 팝업 창 차단
< 팝업창 html 및 css 파일 - cjmPopup.html >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
<style>
* {
margin: 0 auto;
padding: 0;
list-style: none;
}
img {
margin: 0;
max-width: 100%;
height: auto;
}
.popupPage {
padding: 20px;
background-color: #fff;
box-shadow: 10px 10px 20px rgb(0, 0, 0, 0.3);
}
.popupPage>.popupImage>.swipeImg {
display: none;
}
.swipeImgControll {
margin-left: 5px;
}
.popupPage>.popupImage>.swipeImg.active {
width: 320px;
height: 250px;
display: block;
animation: fadeIn 1s ease-in-out;
border-radius: 10px;
}
@keyframes fadeIn {
from {
opacity: 0.5;
}
to {
opacity: 1;
}
}
.popupControll {
overflow: hidden;
position: relative;
margin-top: 15px;
font-size: 11pt;
height: 21px;
line-height: 21px;
}
.popupControll .cookieControll {
position: absolute;
top: 1px;
right: 5px;
color: #999;
}
.playStopBtnImg {
float: left;
display: inline;
margin-top: 1px;
}
.playStopBtnToggle {
display: inline-block;
}
.popupControll .swipeImgControll .playStopBtn .playStopBtnImg > img:hover {
cursor: pointer;
}
.pagination {
float: left;
margin-left: 8px;
}
.pagination .pagination-bullet {
display: inline-block;
width: 8px;
height: 8px;
margin-left: 2px;
border-radius: 100%;
background-color: rgb(196, 194, 194);
}
.pagination .pagination-bullet:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div class="popupPage">
<div class="popupImage">
<img src="TP4_img/popupSwipeImg1.jpeg" alt="0" class="swipeImg active">
<img src="TP4_img/popupSwipeImg2.jpeg" alt="1" class="swipeImg">
<img src="TP4_img/popupSwipeImg3.jpeg" alt="2" class="swipeImg">
<img src="TP4_img/popupSwipeImg4.jpeg" alt="3" class="swipeImg">
</div>
<div class="popupControll">
<div class="swipeImgControll">
<div class="playStopBtn">
<div class="playStopBtnImg">
<img src="TP4_img/popupStopIcon.png" alt="stopIcon" class="playStopBtnToggle">
</div>
<div class="pagination">
<span class="pagination-bullet" data-pagination="0"></span>
<span class="pagination-bullet" data-pagination="1"></span>
<span class="pagination-bullet" data-pagination="2"></span>
<span class="pagination-bullet" data-pagination="3"></span>
</div>
</div>
</div>
<div class="cookieControll">
<input type="checkbox"><span> 오늘 하루 이 창을 보지 않기</span>
</div>
</div>
</div>
<script type="text/javascript" src="js/cjmPopup.js"></script>
</body>
</html>
< 팝업창 js 파일 - cjmPopup.js >
//popupPage Image Swipe
var arr = document.querySelectorAll(".popupPage > .popupImage > .swipeImg");
var pagination = document.querySelectorAll(".pagination-bullet");
pagination[0].style.backgroundColor = "rgb(79, 17, 90)";
var i = 0;
var popupSetIntervalNum = 0;
//3초마다 이미지 자동 변경
popupSetIntervalNum = setInterval(controllImgSwipe, 3000);
function controllImgSwipe() {
arr[i].classList.toggle("active");
pagination[i].style.backgroundColor = "rgb(196, 194, 194)";
i++;
if (i == arr.length) i = 0;
pagination[i].style.backgroundColor = "rgb(79, 17, 90)";
arr[i].classList.toggle("active");
};
//클릭 시 이미지 변경
var pagination2 = document.querySelector(".pagination");
pagination2.onclick = function (e) {
if (e.target.tagName != "SPAN") return;
if (playStopBtnToggle.alt === "stopIcon") {
window.clearInterval(popupSetIntervalNum);
var i = e.target.dataset.pagination;
for (let i = 0; i < arr.length; i++) {
if (arr[i].classList.contains("active")) {
arr[i].classList.remove("active");
pagination[i].style.backgroundColor = "rgb(196, 194, 194)";
}
};
arr[i].classList.add("active");
pagination[i].style.backgroundColor = "rgb(79, 17, 90)";
popupSetIntervalNum = setInterval(function () {
arr[i].classList.toggle("active");
pagination[i].style.backgroundColor = "rgb(196, 194, 194)";
i++;
if (i == arr.length) i = 0;
pagination[i].style.backgroundColor = "rgb(79, 17, 90)";
arr[i].classList.toggle("active");
}, 3000);
} else if (playStopBtnToggle.alt === "playIcon") {
var i = e.target.dataset.pagination;
for (let i = 0; i < arr.length; i++) {
if (arr[i].classList.contains("active")) {
arr[i].classList.remove("active");
pagination[i].style.backgroundColor = "rgb(196, 194, 194)";
}
};
arr[i].classList.add("active");
pagination[i].style.backgroundColor = "rgb(79, 17, 90)";
}
};
//쿠키 생성
var popupControll = document.querySelector(".popupControll");
var popupControllCheckbox = document.querySelector('.popupControll input[type="checkbox"]');
var date = new Date();
date.setDate(date.getDate() + 1);
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
popupControllCheckbox.onclick = function () {
if (popupControllCheckbox.checked) {
document.cookie = "cjmPopupPage=123456; path=/; expires=" + date.toUTCString();
}
window.close();
};
//play & stop button image toggle
var playStopBtnToggle = document.querySelector(".playStopBtnToggle");
var cnt = 1;
playStopBtnToggle.addEventListener('click', playStopToggle);
function playStopToggle(e) {
if (e.target.tagName != "IMG") return;
if (e.target.alt === "stopIcon") {
window.clearInterval(popupSetIntervalNum);
e.target.src = "TP4_img/popupPlayIcon.png";
e.target.alt = "playIcon";
} else if (e.target.alt === "playIcon") {
var i = 0;
for(let j=0; j<arr.length; j++) {
if(arr[j].classList.contains("active")) i = j;
}
arr[i].classList.add("active");
pagination[i].style.backgroundColor = "rgb(79, 17, 90)";
popupSetIntervalNum = setInterval(function () {
arr[i].classList.toggle("active");
pagination[i].style.backgroundColor = "rgb(196, 194, 194)";
i++;
if (i == arr.length) i = 0;
pagination[i].style.backgroundColor = "rgb(79, 17, 90)";
arr[i].classList.toggle("active");
}, 3000);
e.target.src = "TP4_img/popupStopIcon.png";
e.target.alt = "stopIcon";
}
};
✶ 메인 홈페이지
*메인 홈페이지 구현 기능
1. 최상단 배너 및 배너 닫기 기능
2. 홈페이지 리다이렉션 버튼 및 유저 인터페이스
3. 메인 메뉴바 및 검색창
4. 드롭다운 메뉴판
5. 메인 메뉴바 최상단에 닿을 시 상단 고정 및 가시성 보완을 위한 스타일 변경과 우측 하단 예매하기 및 상단 이동 버튼 고정
6. 영화 프리뷰 영역
- 페이지 접속 시 자동재생, 하단 컨트롤 바 제거 및 정지・재생 버튼
- 소리 on-off 버튼
- 영상 재생 종료 시, 재생 버튼 자동 토글
7. 영화 목록 5개씩 나눠서 보여줄 수 있도록 이동 버튼 구현
8. 무비차트 / 상영예정작 마우스 오버 시 후버 기능
9. 무비차트 / 상영예정작 토글 구현
10. 이벤트 영역 자동 슬라이드 및 정지 버튼과 이동 버튼
< 메인 홈페이지 html 파일 - cjm.html >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/cjm.css">
</head>
<body>
<div class="outer">
<header>
<div class="header-outer">
<div class="top-banner">
<a href="#">
<img src="TP4_img/header_banner.png" alt="header_banner">
<button id="btn_ad_close"><img src="TP4_img/btn_ad_close.png" alt="btn_ad_close"></button>
</a>
</div>
<div class="main-header">
<div class="main-header-contents">
<div class="main-header-inner main-header-inner1">
<a href="#"><img src="TP4_img/logoRed.png"></a>
<span>C U L T U R E P L E X</span>
</div>
<ul class="main-header-inner main-header-inner2">
<li class="header_middle_ad">
<a href="#">
<img src="TP4_img/header_middle_ad.png">
</a>
</li>
<li class="header_middle_user">
<a href="#">
<img src="TP4_img/loginPassword.png">
<span>로그인</span>
</a>
</li>
<li class="header_middle_user">
<a href="#">
<img src="TP4_img/loginJoin.png">
<span>회원가입</span>
</a>
</li>
<li class="header_middle_user">
<a href="#">
<img src="TP4_img/loginMember.png">
<span>MY CGV</span>
</a>
</li>
<li class="header_middle_user">
<a href="#">
<img src="TP4_img/loginCustomer.png">
<span>고객센터</span>
</a>
</li>
</ul>
</div>
</div>
<div class="header_bottom_outer in" id="hbo">
<div class="header_bottom_wrap in">
<div class="header_bottom in">
<div class="menu_bar in">
<ul class="gnb in">
<li class="in">
<span class="in"><a href="#" class="in">영화</a></span>
</li>
<li class="in">
<span class="in"><a href="#" class="in">극장</a></span>
</li class="in">
<li class="menu_bar_reservation in">
<span class="in"><a href="#" class="in">예매</a></span>
</li>
<li class="in">
<span class="in"><a href="#" class="in">스토어</a></span>
</li>
<li class="in">
<span class="in"><a href="#" class="in">이벤트</a></span>
</li>
<li class="in">
<span class="in"><a href="#" class="in">혜택</a></span>
</li>
</ul>
</div>
<div class="search_bar in">
<div class="search_bar_inner1 in">
<input type="text" placeholder="유령" class="in">
<img src="TP4_img/icon_search.png" style="width: 26px; height: 26px" class="in">
</div>
</div>
</div>
<div class="fixedBtn">
<a href="#" class="reserveBtn"><span>예매하기</span></a>
<a href="#" class="gotoTopBtn">
<img src="TP4_img/gotoTopImg.png" style="width:15px; height:21px;">
</a>
</div>
</div>
<div class="menuTableOuter">
<div class="menuTable in">
<div class="snb in">
<ul class="in">
<li class="snbLi1 in">영화</li>
<li class="in">무비차트</li>
<li class="in">아트하우스</li>
<li class="in">ICECON</li>
</ul>
</div>
<div class="snb in">
<ul class="in">
<li class="snbLi1 in">극장</li>
<li class="in">CGV 극장</li>
<li class="in">특별관</li>
</ul>
</div>
<div class="snb in">
<ul class="in">
<li class="snbLi1 in">예매</li>
<li class="in">빠른예매</li>
<li class="in">상영스케줄</li>
<li class="in">English Ticketing</li>
<li class="in">English Schedule</li>
</ul>
</div>
<div class="snb in">
<ul class="in">
<li class="snbLi1 in">스토어</li>
<li class="in">영화관람권</li>
<li class="in">기프트카드</li>
<li class="in">콤보</li>
<li class="in">팝콘</li>
<li class="in">음료</li>
<li class="in">스낵</li>
<li class="in">플레이존</li>
<li class="in">씨네샵</li>
</ul>
</div>
<div class="snb in">
<ul class="in">
<li class="snbLi1 in">이벤트</li>
<li class="in">SPECIAL</li>
<li class="in">영화/예매</li>
<li class="in">멤버십/CLUB</li>
<li class="in">CGV 극장별</li>
<li class="in">제휴할인</li>
<li class="in">당첨자 발표</li>
<li class="in">종료된 이벤트</li>
</ul>
</div>
<div class="snb in">
<ul class="in">
<li class="snbLi1 in">혜택</li>
<li class="in">CGV 할인정보</li>
<li class="in">CLUB 서비스</li>
<li class="in">VIP 라운지</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- video -->
<div class="video">
<div class="video_wrap">
<div class="video_inner">
<video id="videoPlayer" src="TP4_img/ghostPreview.mp4" autoplay muted>
</video>
<div class="video_controll_wrap">
<div class="video_info">
<strong>유령</strong>
<br><br>
<span>항일조직 스파이 '유령'</span>
<br>
<span>작전을 성공시켜야만 한다.</span>
<br><br>
</div>
<div class="video_controller">
<a href="#" class="detailViewBtn"><span>상세보기</span></a>
<img src="TP4_img/arrowRight.png">
<a href="#" class="stopPlayBtn">
<img src="TP4_img/videoPauseIcon.png" class="videoPlayControll">
</a>
<a href="#" class="soundControllBtn">
<img src="TP4_img/videoSoundOffIcon.png" class="videoSoundControll">
</a>
</div>
</div>
</div>
</div>
</div>
<!-- movie slide -->
<section class="section1 section_abled">
<div class="movie_contents">
<div class="movie_sort">
<div class="movie_sort_movieChart">
<a href="#" class="movie_sort_movieChart_inner movie_sort_movieChart_inner1"><span
onclick="toggleChart(event);">무비차트</span></a>
<span></span>
<a href="#" class="movie_sort_movieChart_inner movie_sort_movieChart_inner2"><span
onclick="toggleChart(event);">상영예정작</span></a>
</div>
<div class="movie_sort_all">
<a href="#" class="movie_sort_all_inner1"><span>전체보기</span></a>
<img src="TP4_img/arrowRight.png">
</div>
</div>
<div class="movie_chart_outer">
<div class="movie_chart">
<ul class="movie_list movie_list1">
<li class="movie_list_inner">
<div class="movie_img_wrap">
<img src="TP4_img/movie_list1.jpeg">
<i class="movie_list_num">1</i>
</div>
<p>아바타-물의 길</p>
<div class="movie_info_wrap">
<div class="movie_info_left">
<img src="TP4_img/goldenEgg.png" style="width: 16px; height: 16px;">
<span>96%</span>
</div>
<div class="movie_info_right">
<span>예매율 61.3%</span>
</div>
</div>
<div class="hover_cont">
<a href="#" class="hover_cont_inner1">상세보기</a>
<a href="#" class="hover_cont_inner2">예매하기</a>
</div>
</li>
<li class="movie_list_inner">
<div class="movie_img_wrap">
<img src="TP4_img/movie_list2.jpeg">
<i class="movie_list_num">2</i>
</div>
<p>더 퍼스트 슬램덩크</p>
<div class="movie_info_wrap">
<div class="movie_info_left">
<img src="TP4_img/goldenEgg.png" style="width: 16px; height: 16px;">
<span>97%</span>
</div>
<div class="movie_info_right">
<span>예매율 7.7%</span>
</div>
</div>
<div class="hover_cont">
<a href="#" class="hover_cont_inner1">상세보기</a>
<a href="#" class="hover_cont_inner2">예매하기</a>
</div>
</li>
<li class="movie_list_inner">
<div class="movie_img_wrap">
<img src="TP4_img/movie_list3.jpeg">
<i class="movie_list_num">3</i>
</div>
<p>교섭</p>
<div class="movie_info_wrap">
<div class="movie_info_left">
<img src="TP4_img/goldenEgg.png" style="width: 16px; height: 16px;">
<span>99%</span>
</div>
<div class="movie_info_right">
<span>예매율 6.2%</span>
</div>
</div>
<div class="hover_cont">
<a href="#" class="hover_cont_inner1">상세보기</a>
<a href="#" class="hover_cont_inner2">예매하기</a>
</div>
</li>
<li class="movie_list_inner">
<div class="movie_img_wrap">
<img src="TP4_img/movie_list4.jpeg">
<i class="movie_list_num">4</i>
</div>
<p>유령</p>
<div class="movie_info_wrap">
<div class="movie_info_left">
<img src="TP4_img/goldenEgg.png" style="width: 16px; height: 16px;">
<span>99%</span>
</div>
<div class="movie_info_right">
<span>예매율 5.1%</span>
</div>
</div>
<div class="hover_cont">
<a href="#" class="hover_cont_inner1">상세보기</a>
<a href="#" class="hover_cont_inner2">예매하기</a>
</div>
</li>
<li class="movie_list_inner movie_list_inner5">
<div class="movieChartGoRight" onclick="slideGoRight();">
<img src="TP4_img/arrowRight.png" style="width: 16px; height: 16px;">
</div>
<div class="movie_img_wrap">
<img src="TP4_img/movie_list5.jpeg">
<i class="movie_list_num">5</i>
</div>
<p>영웅</p>
<div class="movie_info_wrap">
<div class="movie_info_left">
<img src="TP4_img/goldenEgg.png" style="width: 16px; height: 16px;">
<span>94%</span>
</div>
<div class="movie_info_right">
<span>예매율 4.0%</span>
</div>
</div>
<div class="hover_cont">
<a href="#" class="hover_cont_inner1">상세보기</a>
<a href="#" class="hover_cont_inner2">예매하기</a>
</div>
</li>
</ul>
</div>
<!-- 2번쨰 무비차트 리스트 -->
<div class="movie_chart_disabled">
<ul class="movie_list movie_list2">
<li class="movie_list_inner movie_list_inner6">
<div class="movieChartGoLeft" onclick="slideGoLeft();">
<img src="TP4_img/arrowLeft.png" style="width: 16px; height: 16px;">
</div>
<div class="movie_img_wrap">
<img src="TP4_img/movie_list6.jpeg">
<i class="movie_list_num">6</i>
</div>
<p>장화신은 고양이 끝・・・</p>
<div class="movie_info_wrap">
<div class="movie_info_left">
<img src="TP4_img/goldenEgg.png" style="width: 16px; height: 16px;">
<span>96%</span>
</div>
<div class="movie_info_right">
<span>예매율 3.2%</span>
</div>
</div>
<div class="hover_cont">
<a href="#" class="hover_cont_inner1">상세보기</a>
<a href="#" class="hover_cont_inner2">예매하기</a>
</div>
</li>
<li class="movie_list_inner">
<div class="movie_img_wrap">
<img src="TP4_img/movie_list7.jpeg">
<i class="movie_list_num">7</i>
</div>
<p>스위치</p>
<div class="movie_info_wrap">
<div class="movie_info_left">
<img src="TP4_img/goldenEgg.png" style="width: 16px; height: 16px;">
<span>94%</span>
</div>
<div class="movie_info_right">
<span>예매율 2.9%</span>
</div>
</div>
<div class="hover_cont">
<a href="#" class="hover_cont_inner1">상세보기</a>
<a href="#" class="hover_cont_inner2">예매하기</a>
</div>
</li>
<li class="movie_list_inner">
<div class="movie_img_wrap">
<img src="TP4_img/movie_list8.jpeg">
<i class="movie_list_num">8</i>
</div>
<p>웃는남자 감독판</p>
<div class="movie_info_wrap">
<div class="movie_info_left">
<img src="TP4_img/goldenEgg.png" style="width: 16px; height: 16px;">
<span>97%</span>
</div>
<div class="movie_info_right">
<span>예매율 2.6%</span>
</div>
</div>
<div class="hover_cont">
<a href="#" class="hover_cont_inner1">상세보기</a>
<a href="#" class="hover_cont_inner2">예매하기</a>
</div>
</li>
<li class="movie_list_inner">
<div class="movie_img_wrap">
<img src="TP4_img/movie_list9.jpeg">
<i class="movie_list_num">9</i>
</div>
<p>오늘 밤, 세계에서・・・</p>
<div class="movie_info_wrap">
<div class="movie_info_left">
<img src="TP4_img/goldenEgg.png" style="width: 16px; height: 16px;">
<span>91%</span>
</div>
<div class="movie_info_right">
<span>예매율 1.8%</span>
</div>
</div>
<div class="hover_cont">
<a href="#" class="hover_cont_inner1">상세보기</a>
<a href="#" class="hover_cont_inner2">예매하기</a>
</div>
</li>
<li class="movie_list_inner">
<div class="movie_img_wrap">
<img src="TP4_img/movie_list10.jpeg">
<i class="movie_list_num">10</i>
</div>
<p>마리앙투아네트</p>
<div class="movie_info_wrap">
<div class="movie_info_left">
<img src="TP4_img/goldenEgg.png" style="width: 16px; height: 16px;">
<span>99%</span>
</div>
<div class="movie_info_right">
<span>예매율 1.0%</span>
</div>
</div>
<div class="hover_cont">
<a href="#" class="hover_cont_inner1">상세보기</a>
<a href="#" class="hover_cont_inner2">예매하기</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- movieRes Slide -->
<section class="section2 section_disabled">
<div class="movie_contents">
<div class="movie_sort">
<div class="movie_sort_movieChart">
<a href="#" class="movie_sort_movieChart_inner movie_sort_movieChart_inner1"><span
onclick="toggleChart(event);">무비차트</span></a>
<span></span>
<a href="#" class="movie_sort_movieChart_inner movie_sort_movieChart_inner2"><span
onclick="toggleChart(event);">상영예정작</span></a>
</div>
<div class="movie_sort_all">
<a href="#" class="movie_sort_all_inner1"><span>전체보기</span></a>
<img src="TP4_img/arrowRight.png">
</div>
</div>
<div class="movie_chart_outer">
<div class="movie_chart">
<ul class="movie_res_list movie_list1">
<li class="movie_list_inner">
<div class="movie_img_wrap">
<img src="TP4_img/movie_res_list1.jpeg">
<i class="movie_list_num">1</i>
</div>
<p>프린스 챠밍</p>
<div class="movie_info_wrap">
<div class="movie_info_left">
<img src="TP4_img/goldenEgg.png" style="width: 16px; height: 16px;">
<span>98%</span>
</div>
<div class="movie_info_right">
<span>예매율 0.1%</span>
</div>
</div>
<div class="hover_cont">
<a href="#" class="hover_cont_inner1">상세보기</a>
<a href="#" class="hover_cont_inner2">예매하기</a>
</div>
</li>
<li class="movie_list_inner">
<div class="movie_img_wrap">
<img src="TP4_img/movie_res_list2.jpeg">
<i class="movie_list_num">2</i>
</div>
<p>문맨</p>
<div class="movie_info_wrap">
<div class="movie_info_left">
<img src="TP4_img/goldenEgg.png" style="width: 16px; height: 16px;">
<span>95%</span>
</div>
<div class="movie_info_right">
<span>예매율 0.8%</span>
</div>
</div>
<div class="hover_cont">
<a href="#" class="hover_cont_inner1">상세보기</a>
<a href="#" class="hover_cont_inner2">예매하기</a>
</div>
</li>
<li class="movie_list_inner">
<div class="movie_img_wrap">
<img src="TP4_img/movie_res_list3.jpeg">
<i class="movie_list_num">3</i>
</div>
<p>시간을 꿈꾸는 소녀</p>
<div class="movie_info_wrap">
<div class="movie_info_left">
<img src="TP4_img/goldenEgg.png" style="width: 16px; height: 16px;">
<span>?</span>
</div>
<div class="movie_info_right">
<span>예매율 0.8%</span>
</div>
</div>
<div class="hover_cont">
<a href="#" class="hover_cont_inner1">상세보기</a>
<a href="#" class="hover_cont_inner2">예매하기</a>
</div>
</li>
<li class="movie_list_inner">
<div class="movie_img_wrap">
<img src="TP4_img/movie_res_list4.jpeg">
<i class="movie_list_num">4</i>
</div>
<p>해시태그 시그네</p>
<div class="movie_info_wrap">
<div class="movie_info_left">
<img src="TP4_img/goldenEgg.png" style="width: 16px; height: 16px;">
<span>98%</span>
</div>
<div class="movie_info_right">
<span>예매율 0.2%</span>
</div>
</div>
<div class="hover_cont">
<a href="#" class="hover_cont_inner1">상세보기</a>
<a href="#" class="hover_cont_inner2">예매하기</a>
</div>
</li>
<li class="movie_list_inner movie_list_inner5">
<div class="movieChartGoRight" onclick="slideGoRight();">
<img src="TP4_img/arrowRight.png" style="width: 16px; height: 16px;">
</div>
<div class="movie_img_wrap">
<img src="TP4_img/movie_res_list5.jpeg">
<i class="movie_list_num">5</i>
</div>
<p>나는 마을 방과후 교・・・</p>
<div class="movie_info_wrap">
<div class="movie_info_left">
<img src="TP4_img/goldenEgg.png" style="width: 16px; height: 16px;">
<span>?</span>
</div>
<div class="movie_info_right">
<span>예매율 0.0%</span>
</div>
</div>
<div class="hover_cont">
<a href="#" class="hover_cont_inner1">상세보기</a>
<a href="#" class="hover_cont_inner2">예매하기</a>
</div>
</li>
</ul>
</div>
<!-- 2번쨰 상영예정 무비차트 리스트 -->
<div class="movie_chart_disabled">
<ul class="movie_list movie_list2">
<li class="movie_list_inner movie_list_inner6">
<div class="movieChartGoLeft" onclick="slideGoLeft();">
<img src="TP4_img/arrowLeft.png" style="width: 16px; height: 16px;">
</div>
<div class="movie_img_wrap">
<img src="TP4_img/movie_res_list6.jpeg">
<i class="movie_list_num">6</i>
</div>
<p>[아트&다이닝]빈센・・・</p>
<div class="movie_info_wrap">
<div class="movie_info_left">
<img src="TP4_img/goldenEgg.png" style="width: 16px; height: 16px;">
<span>?</span>
</div>
<div class="movie_info_right">
<span>예매율 0.0%</span>
</div>
</div>
<div class="hover_cont">
<a href="#" class="hover_cont_inner1">상세보기</a>
<a href="#" class="hover_cont_inner2">예매하기</a>
</div>
</li>
<li class="movie_list_inner">
<div class="movie_img_wrap">
<img src="TP4_img/movie_res_list7.jpeg">
<i class="movie_list_num">7</i>
</div>
<p>[사이다경제]서울・・・</p>
<div class="movie_info_wrap">
<div class="movie_info_left">
<img src="TP4_img/goldenEgg.png" style="width: 16px; height: 16px;">
<span>?</span>
</div>
<div class="movie_info_right">
<span>예매율 0.0%</span>
</div>
</div>
<div class="hover_cont">
<a href="#" class="hover_cont_inner1">상세보기</a>
<a href="#" class="hover_cont_inner2">예매하기</a>
</div>
</li>
<li class="movie_list_inner">
<div class="movie_img_wrap">
<img src="TP4_img/movie_res_list8.jpeg">
<i class="movie_list_num">8</i>
</div>
<p>교섭</p>
<div class="movie_info_wrap">
<div class="movie_info_left">
<img src="TP4_img/goldenEgg.png" style="width: 16px; height: 16px;">
<span>99%</span>
</div>
<div class="movie_info_right">
<span>예매율 6.2%</span>
</div>
</div>
<div class="hover_cont">
<a href="#" class="hover_cont_inner1">상세보기</a>
<a href="#" class="hover_cont_inner2">예매하기</a>
</div>
</li>
<li class="movie_list_inner">
<div class="movie_img_wrap">
<img src="TP4_img/movie_res_list9.jpeg">
<i class="movie_list_num">9</i>
</div>
<p>유령</p>
<div class="movie_info_wrap">
<div class="movie_info_left">
<img src="TP4_img/goldenEgg.png" style="width: 16px; height: 16px;">
<span>99%</span>
</div>
<div class="movie_info_right">
<span>예매율 5.1%</span>
</div>
</div>
<div class="hover_cont">
<a href="#" class="hover_cont_inner1">상세보기</a>
<a href="#" class="hover_cont_inner2">예매하기</a>
</div>
</li>
<li class="movie_list_inner">
<div class="movie_img_wrap">
<img src="TP4_img/movie_res_list10.jpeg">
<i class="movie_list_num">10</i>
</div>
<p>유랑의 달</p>
<div class="movie_info_wrap">
<div class="movie_info_left">
<img src="TP4_img/goldenEgg.png" style="width: 16px; height: 16px;">
<span>98%</span>
</div>
<div class="movie_info_right">
<span>예매율 0.0%</span>
</div>
</div>
<div class="hover_cont">
<a href="#" class="hover_cont_inner1">상세보기</a>
<a href="#" class="hover_cont_inner2">예매하기</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Event -->
<article>
<div class="event_outer">
<div class="event">
<div class="event_left">
<p>EVENT</p>
</div>
<div class="event_right event_right1">
<a href="#" class=""><span>전체보기</span></a>
<img src="TP4_img/arrowRight.png">
</div>
<div class="event_right event_right2">
<a href="#" id="eventListStopPlayBtn"><img src="TP4_img/pauseBtn.png" alt="pauseBtn" style="width: 12px; height: 16px;"></a>
</div>
</div>
<!-- 이벤트 1번째 페이지 -->
<div class="event_content_outer1 event_content_outer_abled">
<div class="event_content">
<div>
<img class="event_img" src="TP4_img/eventSlideImg1.jpeg">
</div>
<p class="event_info">CGV x TVING 월정기 혜택 [CGV PLUS]</p>
<p class="event_period">2022.12.02~2032.12.02</p>
</div>
<div class="event_content">
<div>
<img class="event_img" src="TP4_img/eventSlideImg2.jpeg">
</div>
<p class="event_info">★미니게임천국★ [교섭] 예매권 이벤트</p>
<p class="event_period">2023.01.05~2032.01.16</p>
</div>
<div class="event_content event_content3">
<div class="eventContentGoRight" onclick="eventGoRight();">
<img src="TP4_img/arrowRight.png" style="width: 16px; height: 16px;">
</div>
<div>
<img class="event_img" src="TP4_img/eventSlideImg3.jpeg">
</div>
<p class="event_info">우리 동네 CGV 카카오톡 채널 추가하자!</p>
<p class="event_period">2022.12.19~2023.01.17</p>
</div>
</div>
<!-- Event 2번쨰 페이지 -->
<div class="event_content_outer2 event_content_outer_disabled">
<div class="event_content event_content4">
<div class="eventContentGoLeft" onclick="eventGoLeft();">
<img src="TP4_img/arrowLeft.png" style="width: 16px; height: 16px;">
</div>
<div>
<img class="event_img" src="TP4_img/eventSlideImg4.jpeg">
</div>
<p class="event_info">[3000년의 기다림] 필름마크</p>
<p class="event_period">2023.01.03~2023.01.15</p>
</div>
<div class="event_content">
<div>
<img class="event_img" src="TP4_img/eventSlideImg5.jpeg">
</div>
<p class="event_info">[스위치] 필름마크</p>
<p class="event_period">2023.01.03~2023.01.15</p>
</div>
<div class="event_content">
<div>
<img class="event_img" src="TP4_img/eventSlideImg6.jpeg">
</div>
<p class="event_info">[CGV VIP] VIP PLAY </p>
<p class="event_period">2022.12.01~2023.02.28</p>
</div>
</div>
</div>
</article>
</div>
<script src="js/cjm.js"></script>
</body>
</html>
< 메인 홈페이지 css 파일 - cjm.css >
* {
margin: 0 auto;
padding: 0;
list-style: none;
}
img {
max-width: 100%;
height: auto;
}
a {
margin: 0;
padding: 0;
text-decoration: none;
}
header .top-banner {
max-width: 100%;
height: 80px;
background-color: black;
box-sizing: border-box;
text-align: center;
/* display: none; */
}
header .top-banner>a {
position: relative;
}
header .top-banner>a>button {
position: absolute;
top: -10px;
right: 0px;
background-color: transparent;
border: none;
cursor: pointer;
}
.main-header {
width: 100%;
border-bottom: 1px solid rgb(237, 234, 234);
}
.main-header-contents {
overflow: hidden;
width: 991px;
box-sizing: border-box;
}
.main-header .main-header-contents {
padding: 30px 6px 25px 5px;
background-color: white;
}
.main-header .main-header-inner1 {
float: left;
}
.main-header .main-header-inner1>a {
height: 53px;
}
.main-header .main-header-inner1>a>img {
width: 117px;
}
.main-header .main-header-inner2 {
float: right;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
align-items: center;
}
.main-header .main-header-inner2 li a {
display: block;
}
.main-header .main-header-inner2 .header_middle_user img {
width: 36px;
height: 36px;
margin: 0px 22px;
}
.main-header .main-header-inner2 li span {
display: block;
text-align: center;
font-size: 10pt;
color: #777;
}
.header_bottom_outer {
width: 100%;
box-sizing: border-box;
}
.header_bottom_outer .header_bottom_wrap {
border-bottom: 2px solid red;
}
.header_bottom {
overflow: hidden;
width: 980px;
padding: 4px 0px;
}
.header_bottom>.menu_bar {
float: left;
}
.header_bottom>.search_bar {
float: right;
margin-right: 16px;
}
.header_bottom>.menu_bar>ul>li {
display: inline-block;
padding: 5px 0px;
}
.header_bottom>.menu_bar>ul>li>span {
display: inline-block;
width: 81px;
height: 40px;
line-height: 40px;
font-size: 16px;
font-weight: 700;
}
/* 메뉴 마우스 오버 아웃 시작 */
.menuTableOuter {
width: 100%;
}
.menuTable {
width: 980px;
display: none;
justify-content: center;
}
.menuTable.active {
width: 980px;
display: flex;
justify-content: center;
}
.snb {
font-size: 14px;
margin: 10px 0px 0 0;
width: 500px;
}
.snbLi1 {
font-weight: 700;
font-size: 14px;
}
.snb > ul > li {
height: 24px;
cursor: pointer;
}
/* 메뉴 마우스 오버 아웃 끝 */
.header_bottom>.menu_bar>ul>li>span>a {
color: black;
}
.header_bottom_outer .menu_bar .gnb .menu_bar_reservation > span > a {
color: red;
}
.header_bottom>.search_bar>.search_bar_inner1 {
width: 230px;
height: 24px;
border-left: 1px solid #777;
border-right: 1px solid #777;
display: flex;
justify-content: center;
margin-top: 8px;
}
.header_bottom>.search_bar>.search_bar_inner1>input {
border: none;
width: 180px;
height: 24px;
font-size: 18px;
padding: 0px 5px;
box-sizing: border-box;
}
.header_bottom>.search_bar>.search_bar_inner1>img {
margin: 0 5px 0 0;
}
.header_bottom>.search_bar>.search_bar_inner1>img:hover {
cursor: pointer;
/* 페이지 이동 함수 필요 */
}
.video {
max-width: 100%;
height: 498px;
box-sizing: border-box;
}
.video .video_wrap {
width: 100%;
height: 100%;
box-sizing: border-box;
background-color: black;
text-align: center;
}
.video .video_wrap video {
width: 980px;
height: 498px;
box-sizing: border-box;
}
.video .video_wrap .video_inner {
width: 980px;
height: 498px;
position: relative;
}
.video_controll_wrap {
position: absolute;
top: 170px;
left: 20px;
}
.video_controll_wrap .video_info {
text-align: left;
}
.video_controll_wrap .video_info>strong {
color: white;
font-size: 40px;
}
.video_controll_wrap .video_info>span {
color: white;
font-size: 20px;
}
.video_controller {
text-align: left;
position: relative;
display: inline-flex;
align-items: center;
justify-content: flex-start;
}
.video_controller>a {
color: white;
}
.video .detailViewBtn {
width: 99px;
height: 30px;
line-height: 30px;
font-size: 14px;
border: none;
border-radius: 15px;
color: black;
background: rgba(255, 255, 255, 0.8);
}
.video .detailViewBtn span {
margin-left: 18px;
}
.video_controller>img {
width: 10px;
height: 14px;
position: absolute;
top: 7px;
left: 75px;
}
.video .stopPlayBtn,
.video .soundControllBtn {
width: 30px;
height: 30px;
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 15px;
display: inline-flex;
align-items: center;
margin-left: 8px;
}
.video .stopPlayBtn>img,
.video .soundControllBtn>img {
width: 20px;
height: 20px;
}
.section_abled .movie_contents {
width: 100%;
height: 462px;
box-sizing: border-box;
padding-top: 0px;
}
.section_abled .movie_contents .movie_sort {
width: 980px;
height: 37px;
box-sizing: border-box;
overflow: hidden;
margin-top: 50px;
margin-bottom: 20px;
}
.section_abled .movie_contents .movie_sort .movie_sort_movieChart {
float: left;
}
.section_abled .movie_contents .movie_sort .movie_sort_all {
float: right;
}
.section_abled .movie_contents .movie_sort .movie_sort_movieChart .movie_sort_movieChart_inner {
font-size: 26px;
}
.section_abled .movie_contents .movie_sort .movie_sort_movieChart .movie_sort_movieChart_inner1 {
color: black;
font-weight: 700;
}
.section_abled .movie_contents .movie_sort .movie_sort_movieChart > span {
display: inline-block;
width: 10px;
height: 12px;
border-right: 1px solid rgba(146, 146, 146, 0.3);
padding-bottom: 5px;
margin-top: 15px;
}
.section_abled .movie_contents .movie_sort .movie_sort_movieChart .movie_sort_movieChart_inner2 {
color: #777;
font-weight: 500;
margin-left: 8px;
}
.section_abled .movie_sort_all {
position: relative;
}
.section_abled .movie_sort_all .movie_sort_all_inner1 {
width: 99px;
height: 30px;
display: inline-block;
line-height: 30px;
font-size: 14px;
border: 1px solid rgba(146, 146, 146, 0.3);
border-radius: 15px;
color: black;
}
.section_abled .movie_sort_all .movie_sort_all_inner1>span {
margin-left: 18px;
}
.section_abled .movie_sort_all>img {
width: 10px;
height: 14px;
position: absolute;
top: 7px;
left: 75px;
}
.section_abled {
height: 412px;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(232, 232, 232, 0.37));
z-index: 0;
}
.section_abled .movie_chart_outer {
width: 980px;
height: 295px;
}
.section_abled .movie_chart > ul > li img {
width: 170px;
height: 234px;
box-sizing: border-box;
border-radius: 5%;
}
.section_abled .movie_chart > ul {
display: flex;
justify-content: space-between;
}
.section_abled .movie_chart ul > li {
width: 170px;
height: 295px;
margin: 0;
}
.section_abled .movie_chart ul > li > p {
text-align: center;
font-size: 18px;
font-weight: 500;
}
.section_abled .movie_chart ul > li .movie_info_wrap {
overflow: hidden;
display: flex;
justify-content: center;
align-items: flex-end;
/* height: 234px; */
}
.section_abled .movie_chart ul > li .movie_info_wrap .movie_info_left {
float: left;
font-size: 14px;
color: #666;
}
.section_abled .movie_chart > ul > li .movie_info_wrap .movie_info_right {
float: right;
font-size: 14px;
color: #666;
}
.section_abled .movie_chart .movie_img_wrap {
position: relative;
margin-bottom: 10px;
}
.section_abled .movie_chart .movie_img_wrap > i {
position: absolute;
bottom: -12px;
left: 10px;
color: white;
font-size: 50px;
}
/* 무비 리스트 스와이프 관련 CSS */
.section_abled .movie_chart_disabled {
display: none;
}
.section_abled .movie_list_inner5 {
position: relative;
}
.section_abled .movieChartGoRight {
position: absolute;
right: -20px;
top: 97px;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
box-sizing: border-box;
border: 1px solid rgb(196, 195, 195);
border-radius: 100%;
background: white;
cursor: pointer;
}
.section_abled .movie_list_inner6 {
position: relative;
}
.section_abled .movieChartGoLeft {
position: absolute;
left: -20px;
top: 97px;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
box-sizing: border-box;
border: 1px solid rgb(196, 195, 195);
border-radius: 100%;
background: white;
cursor: pointer;
}
/* 무비차트 & 상영예정작 토글 */
.section_disabled {
display: none;
}
article .event_outer {
max-width: 100%;
padding: 60px 0 6px;
margin-top: 10px;
}
article .event {
width: 980px;
overflow: hidden;
}
.event .event_left {
float: left;
font-size: 26px;
font-weight: 800;
}
.event .event_right {
float: right;
}
.event_right2 {
width: 30px;
height: 30px;
border: 1px solid rgba(146, 146, 146, 0.3);
border-radius: 15px;
text-align: center;
margin-right: 10px;
}
.event_right2 img {
padding-top: 7px;
padding-left: 3px;
}
.event_right1 {
position: relative;
}
.event_right1 > a {
width: 99px;
height: 30px;
display: inline-block;
line-height: 30px;
font-size: 14px;
border: 1px solid rgba(146, 146, 146, 0.3);
border-radius: 15px;
color: black;
}
.event_right1 > a > span {
margin-left: 18px;
}
.event_right1 > img {
width: 10px;
height: 14px;
position: absolute;
top: 7px;
left: 75px;
}
.event_content_outer_abled {
margin-top: 18px;
width: 980px;
display: flex;
justify-content: space-between;
}
.event_content_outer_abled .event_content {
margin: 0;
}
.event_content_outer_abled .event_info {
font-size: 18px;
font-weight: 700;
margin-top: 15px;
}
.event_content_outer_abled .event_period {
font-size: 14px;
color: #666;
margin-top: 5px;
}
.event_content_outer_abled .event_img {
width: 310px;
height: 207px;
border-radius: 5%;
}
/* 이벤트 리스트 토글 */
.event_content_outer_disabled {
display: none;
}
/* 이벤트 리스트 스와이프 관련 CSS */
.event_content_outer_abled .movie_chart_disabled {
display: none;
}
.event_content_outer_abled .event_content3 {
position: relative;
}
.event_content_outer_abled .eventContentGoRight {
position: absolute;
top: 84px;
right: -20px;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
box-sizing: border-box;
border: 1px solid rgb(196, 195, 195);
border-radius: 100%;
background: white;
cursor: pointer;
}
.event_content_outer_abled .event_content4 {
position: relative;
}
.event_content_outer_abled .eventContentGoLeft {
position: absolute;
left: -20px;
top: 84px;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
box-sizing: border-box;
border: 1px solid rgb(196, 195, 195);
border-radius: 100%;
background: white;
cursor: pointer;
}
/* 메뉴바 상단 고정 관련 CSS */
.sticky {
position: fixed;
top: 0px;
z-index: 10;
}
.header_bottom_outer_fixed {
width: 100%;
box-sizing: border-box;
background-image: linear-gradient(to right, rgb(215, 67, 87), rgb(241,79,58) 59%, rgb(239, 100, 47));
}
.header_bottom_outer_fixed .menuTableOuter {
background: white;
}
.header_bottom_outer_fixed .menu_bar ul li span > a{
color: white;
}
.header_bottom_outer_fixed .search_bar input {
background: none;
}
/* 위치 고정 버튼 */
/*
video_controller -> fixedBtn
detail -> reserveBtn
stopPlay -> gotoTopBtn
*/
.fixedBtn {
display: none;
/* display: flex; */
justify-content: center;
position: fixed;
right: 60px;
bottom: 80px;
z-index: 11;
}
.fixedBtn .reserveBtn {
display: inline-block;
width: 136px;
height: 50px;
line-height: 50px;
border: none;
border-radius: 100px;
color: black;
background-image: linear-gradient(to right, rgb(215, 67, 87), rgb(241,79,58) 59%, rgb(239, 100, 47));
}
.fixedBtn .reserveBtn span {
margin-left: 18px;
font-size: 16px;
font-weight: 700;
color: white;
padding-left: 20px;
}
.fixedBtn > img {
width: 10px;
height: 14px;
position: absolute;
top: 7px;
left: 75px;
}
.fixedBtn .gotoTopBtn {
width: 50px;
height: 50px;
border: 1px solid rgba(0, 0, 0, 0.8);
box-sizing: border-box;
border-radius: 50px;
display: inline-flex;
align-items: center;
margin-left: 8px;
}
/* hover_cont */
.section_abled .movie_chart ul li {
position: relative;
}
.section_abled .hover_cont {
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 170px;
height: 234px;
box-sizing: border-box;
border-radius: 5%;
color: white;
background-color: rgb(0, 0, 0, 0.7);
opacity: 0;
transition: opacity 0.25s ease-in-out;
text-align: center;
padding-top: 85px;
}
.section_abled .hover_cont a {
margin-top: 55px;
display: inline-block;
color: white;
font-weight: 900;
font-size: 13px;
width: 120px;
height: 34px;
line-height: 34px;
border: 1px solid white;
}
.section_abled .movie_chart ul li .hover_cont_inner1 {
background-color: white;
color: black;
font-weight: 500;
border-radius: 5px;
border: none;
margin: 0;
}
.section_abled .movie_chart ul li .hover_cont_inner2 {
background-color: rgb(231, 63, 63);
color: white;
font-weight: 500;
border-radius: 5px;
border: none;
margin-top: 5px;
}
/* movieList hover 처리 */
.section_abled .movie_chart ul li:hover .hover_cont{
opacity: 1;
}
.section_abled .movie_chart ul li:hover {
height: 66px;
}
.section_abled .movie_chart ul li:hover .hover_cont_inner1 {
background-color: white;
color: black;
font-weight: 500;
border-radius: 5px;
border: none;
}
.section_abled .movie_chart ul li:hover .hover_cont_inner2 {
background-color: rgb(231, 63, 63);
color: white;
font-weight: 500;
border-radius: 5px;
border: none;
}
< 메인 홈페이지 js 파일 - cjm.js >
//쿠키 이름, 쿠키 값 조회
var cookieArr = document.cookie.split("; ");
var cnt = 0;
for (i in cookieArr) {
if (cookieArr[i].split("=")[0] == "cjmPopupPage") {
cnt++;
}
}
if (cnt == 0) {
window.open("cjmPopup.html", "cjmPopupPage", "width=360px, height=325px");
}
//remove top banner
var topBannerDelBtn = document.getElementById("btn_ad_close");
topBannerDelBtn.onclick = function () {
document.querySelector("header .top-banner").style.display = "none";
}
//메뉴바 마우스 오버 아웃
var gnb = document.querySelectorAll(".gnb > li > span > a");
var menuTable = document.querySelector(".menuTable");
// mouseover
for (let i = 0; i < gnb.length; i++) {
gnb[i].addEventListener('mouseover', function (e) {
menuTable.classList.add("active");
var ins = document.querySelectorAll(".in");
for(let j=0; j<ins.length; j++) {
ins[j].addEventListener('mouseover', function() {
menuTable.classList.add("active");
});
};
});
};
//mouseout
var headerElement = document.querySelector(".header_bottom_outer");
headerElement.addEventListener('mouseout', function (e) {
menuTable.classList.remove("active");
});
//video stop or play
var videoPlayer = document.getElementById("videoPlayer");
var stopPlayBtn = document.querySelector(".video_controller .stopPlayBtn");
var stopPlayBtnImg = document.querySelector(".video_controller .stopPlayBtn > img");
stopPlayBtn.onclick = function (e) {
e.preventDefault();
if (!videoPlayer.paused) {
videoPlayer.pause();
stopPlayBtnImg.src = "TP4_img/videoPlayIcon.png";
} else {
videoPlayer.play();
stopPlayBtnImg.src = "TP4_img/videoPauseIcon.png";
}
}
//영상 끝나면 버튼 전환
setInterval(function () {
if (videoPlayer.paused) {
stopPlayBtnImg.src = "TP4_img/videoPlayIcon.png";
}
}, 200);
//EVENT 리스트 자동 스와이프
var eventSwipeIntervalNum = 0;
eventSwipeIntervalNum = setInterval(function (e) {
var event_list = document.querySelector(".event_content_outer_abled");
var event_list_disabled = document.querySelector(".event_content_outer_disabled");
event_list.classList.toggle("event_content_outer_abled");
event_list_disabled.classList.toggle("event_content_outer_abled");
event_list.classList.toggle("event_content_outer_disabled");
event_list_disabled.classList.toggle("event_content_outer_disabled");
}, 3000);
//EVENT 리스트 자동 스와이프 정지 및 실행
var eventListStopPlayBtn = document.getElementById("eventListStopPlayBtn");
var eventContentOuter1 = document.querySelector(".event_content_outer1");
var eventContentOuter2 = document.querySelector(".event_content_outer2");
eventListStopPlayBtn.addEventListener('click', eventListStopPlayToggle);
function eventListStopPlayToggle(e) {
e.preventDefault();
if (e.target.tagName != "IMG") return;
if (e.target.alt == "pauseBtn") {
window.clearInterval(eventSwipeIntervalNum);
e.target.src = "TP4_img/playBtn.png";
e.target.alt = "playBtn";
} else if (e.target.alt == "playBtn") {
eventSwipeIntervalNum = setInterval(function () {
e.target.src = "TP4_img/pauseBtn.png";
e.target.alt = "pauseBtn";
eventContentOuter1.classList.toggle("event_content_outer_abled");
eventContentOuter2.classList.toggle("event_content_outer_abled");
eventContentOuter1.classList.toggle("event_content_outer_disabled");
eventContentOuter2.classList.toggle("event_content_outer_disabled");
}, 3000);
};
}
//video sound controll
var soundControllBtn = document.querySelector(".video_controller .soundControllBtn")
var soundControllBtnImg = document.querySelector(".video_controller .soundControllBtn > img");
soundControllBtn.addEventListener('click', controllSound);
function controllSound(e) {
e.preventDefault();
if (videoPlayer.muted) {
videoPlayer.muted = false;
soundControllBtnImg.src = "TP4_img/videoSoundOnIcon.png";
} else {
videoPlayer.muted = true;
soundControllBtnImg.src = "TP4_img/videoSoundOffIcon.png";
}
}
//movie_list slide go right
function slideGoRight() {
var movie_chart = document.querySelector(".section_abled .movie_chart");
var movie_chart_disabled = document.querySelector(".section_abled .movie_chart_disabled");
movie_chart.classList.toggle("movie_chart");
movie_chart_disabled.classList.toggle("movie_chart");
movie_chart.classList.toggle("movie_chart_disabled");
movie_chart_disabled.classList.toggle("movie_chart_disabled");
}
//movie_list slide go left
function slideGoLeft() {
var movie_chart = document.querySelector(".section_abled .movie_chart");
var movie_chart_disabled = document.querySelector(".section_abled .movie_chart_disabled");
movie_chart.classList.toggle("movie_chart");
movie_chart_disabled.classList.toggle("movie_chart");
movie_chart.classList.toggle("movie_chart_disabled");
movie_chart_disabled.classList.toggle("movie_chart_disabled");
}
//무비차트 & 상영예정작 버튼 토클
// var chartSort = document.querySelector(".section_abled .movie_sort_movieChart");
var section1 = document.querySelector(".section1");
var section2 = document.querySelector(".section2");
// chartSort.addEventListener('click', toggleChart);
function toggleChart(e) {
e.preventDefault();
if (e.target.tagName != "SPAN") return;
if (e.target.innerHTML == "무비차트") {
section2.classList.remove("section_abled");
section1.classList.remove("section_disabled");
section1.classList.add("section_abled");
section2.classList.add("section_disabled");
var movieChartInner1 = document.querySelector(".section_abled .movie_sort_movieChart_inner1 > span");
var movieChartInner2 = document.querySelector(".section_abled .movie_sort_movieChart_inner2 > span");
movieChartInner1.style.color = "black";
movieChartInner2.style.color = "#777";
} else if (e.target.innerHTML == "상영예정작") {
section1.classList.remove("section_abled");
section2.classList.remove("section_disabled");
section2.classList.add("section_abled");
section1.classList.add("section_disabled");
var movieChartInner1 = document.querySelector(".section_abled .movie_sort_movieChart_inner1 > span");
var movieChartInner2 = document.querySelector(".section_abled .movie_sort_movieChart_inner2 > span");
movieChartInner2.style.color = "black";
movieChartInner1.style.color = "#777";
}
}
//event_list slide go right
function eventGoRight() {
var event_list = document.querySelector(".event_content_outer_abled");
var event_list_disabled = document.querySelector(".event_content_outer_disabled");
event_list.classList.toggle("event_content_outer_abled");
event_list_disabled.classList.toggle("event_content_outer_abled");
event_list.classList.toggle("event_content_outer_disabled");
event_list_disabled.classList.toggle("event_content_outer_disabled");
}
//event_list slide go left
function eventGoLeft() {
var event_list = document.querySelector(".event_content_outer_abled");
var event_list_disabled = document.querySelector(".event_content_outer_disabled");
event_list.classList.toggle("event_content_outer_abled");
event_list_disabled.classList.toggle("event_content_outer_abled");
event_list.classList.toggle("event_content_outer_disabled");
event_list_disabled.classList.toggle("event_content_outer_disabled");
}
//메뉴바 상단 고정 및 고정 버튼 토글
var fixedBtn = document.querySelector(".fixedBtn");
var topMenu, topMenuPosition;
topMenu = document.querySelector(".header_bottom_outer");
topMenuPosition = topMenu.offsetTop; //메뉴바 처음 위치 인식
console.log(topMenuPosition);
function menuBarFixed() {
topMenuPosition = document.querySelector(".top-banner").style.display == "none" ? 114 : 194;
if(window.pageYOffset > topMenuPosition) {
topMenu.classList.add("sticky");
topMenu.classList.add("header_bottom_outer_fixed");
topMenu.classList.remove("header_bottom_outer");
fixedBtn.style.display = "flex";
} else {
topMenu.classList.remove("sticky");
topMenu.classList.remove("header_bottom_outer_fixed");
topMenu.classList.add("header_bottom_outer");
fixedBtn.style.display = "none";
};
}
document.addEventListener('scroll', menuBarFixed);반응형
'Growth Story as a Developer' 카테고리의 다른 글
| Toy Project - 웹 버전 주문 어플리케이션 (0) | 2022.12.13 |
|---|---|
| Toy Project - 지역별 맛집 리스트 조회 (0) | 2022.11.27 |
| Toy Project - 영타 연습기, 오목 (0) | 2022.11.04 |
| 국비지원학원 선택 꿀팁 (1) | 2022.09.25 |
| 개발 분야 고민 및 선택 : Front End vs Back End (0) | 2022.06.27 |
댓글