somang4819/itsm_ysm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

접근성수정

Browse Source
This commit is contained in:
com02 2021-12-06 14:52:20 +09:00
parent cb4161baa7
commit fbb01f26ad
4 changed files with 107 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
src/main/webapp/WEB-INF/jsp/nlib/cmm/home.jsp
View File

@ -172,7 +172,7 @@ function fn_listPops(typeDivCd) {
<div class="swiper-pagination"></div>
<div class="loop-count">
<canvas id="swieper-timer" width="32" height="32"></canvas>
<button class="remote"><span></span></button>
<button class="remote remote-main"><span></span></button>
</div>
</div>
@ -264,7 +264,13 @@ function fn_listPops(typeDivCd) {
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
<div id="pickBannerPage" class="pagination">
<div class="swiper-pagination"></div>
<div class="loop-count">
<canvas id="swieper-timer" width="32" height="32"></canvas>
<button class="remote remote-pick"><span></span></button>
</div>
</div>
</div>
</div>
</div>
@ -309,7 +315,13 @@ function fn_listPops(typeDivCd) {
</li>
</c:forEach>
</ul>
<div class="swiper-pagination"></div>
<div id="popularBannerPage" class="pagination">
<div class="swiper-pagination"></div>
<div class="loop-count">
<canvas id="swieper-timer" width="32" height="32"></canvas>
<button class="remote remote-popular"><span></span></button>
</div>
</div>
</div>
</div>
</div>
@ -357,7 +369,13 @@ function fn_listPops(typeDivCd) {
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
<div id="onlineBannerPage" class="pagination">
<div class="swiper-pagination"></div>
<div class="loop-count">
<canvas id="swieper-timer" width="32" height="32"></canvas>
<button class="remote remote-online"><span></span></button>
</div>
</div>
</div>
<div class="more-btn"><a href="javascript:void(0)" onclick="location.href='/search/searchList.do?collection=lib_online';"><span><span>더보기</span> <img src="/images/icon/icon-more.png" alt="더보기"></span></a></div>
</div>
@ -440,16 +458,6 @@ function fn_listPops(typeDivCd) {
}
});
$('.remote').click(function () {
if($(this).hasClass('restart')){
$(this).removeClass('restart');
myswiper.autoplay.start();
}else{
$(this).addClass('restart');
myswiper.autoplay.stop();
}
});
var windowWidth = $(window).width();
var _slidesPerView = 5;
var _slidesPerViewpopula = 4;
@ -473,8 +481,8 @@ function fn_listPops(typeDivCd) {
}
/* 문화원s pick */
var swiper = new Swiper('.pickSwiper', {
loop : false,
var pickswiper = new Swiper('.pickSwiper', {
loop : true,
slidesPerView : _slidesPerView,
spaceBetween : _spaceBetween,
centeredSlides : false,
@ -486,12 +494,10 @@ function fn_listPops(typeDivCd) {
nextEl : ".swiper-button-next",
prevEl : ".swiper-button-prev",
},
/*
pagination: {
el: ".swiper-pagination",
clickable: true,
},
*/
el: '.pagination .swiper-pagination',
type: 'fraction',
},
on: {
init: function () {
if (this.slides.length <= _lenght) {
@ -499,25 +505,30 @@ function fn_listPops(typeDivCd) {
this.allowSlidePrev = this.allowSlideNext = false; // disabling swiping
this.el.querySelector(".swiper-button-prev").style.visibility = "hidden"; // hiding arrows prev&next
this.el.querySelector(".swiper-button-next").style.visibility = "hidden";
this.el.querySelector(".loop-count").style.visibility = "hidden";
}
}
}
});
/* 온라인 자료관 */
var swiper = new Swiper('.onlineSwiper', {
var onlineswiper = new Swiper('.onlineSwiper', {
loop : true,
slidesPerView : _slidesPerViewOnline,
spaceBetween : _spaceBetween,
centeredSlides : true,
// autoplay: {
// delay: 4000,
// disableOnInteraction: false,
// },
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
navigation : {
nextEl : ".swiper-button-next",
prevEl : ".swiper-button-prev",
},
pagination: {
el: '.pagination .swiper-pagination',
type: 'fraction',
},
on: {
init: function () {
if (this.slides.length <= _lenght) {
@ -525,14 +536,15 @@ function fn_listPops(typeDivCd) {
this.allowSlidePrev = this.allowSlideNext = false; // disabling swiping
this.el.querySelector(".swiper-button-prev").style.visibility = "hidden"; // hiding arrows prev&next
this.el.querySelector(".swiper-button-next").style.visibility = "hidden";
this.el.querySelector(".loop-count").style.visibility = "hidden";
}
}
}
});
/* 인기자료 */
var swiper = new Swiper('.popularSwiper', {
loop: false,
var popularswiper = new Swiper('.popularSwiper', {
loop: true,
slidesPerView : _slidesPerViewpopula,
spaceBetween : _spaceBetween,
autoplay : {
@ -540,9 +552,10 @@ function fn_listPops(typeDivCd) {
disableOnInteraction : false,
},
centeredSlides : false,
pagination : {
el : ".swiper-pagination",
},
pagination: {
el: '.pagination .swiper-pagination',
type: 'fraction',
},
on: {
init: function () {
if (this.slides.length <= _lenght) {
@ -551,9 +564,47 @@ function fn_listPops(typeDivCd) {
//this.el.querySelector(".swiper-button-prev").style.visibility = "hidden"; // hiding arrows prev&next
//this.el.querySelector(".swiper-button-next").style.visibility = "hidden";
$(".swiper-pagination").css('visibility','hidden');
this.el.querySelector(".loop-count").style.visibility = "hidden";
}
}
}
});
$('.remote-main').click(function () {
if($(this).hasClass('restart')){
$(this).removeClass('restart');
myswiper.autoplay.start();
}else{
$(this).addClass('restart');
myswiper.autoplay.stop();
}
});
$('.remote-pick').click(function () {
if($(this).hasClass('restart')){
$(this).removeClass('restart');
pickswiper.autoplay.start();
}else{
$(this).addClass('restart');
pickswiper.autoplay.stop();
}
});
$('.remote-popular').click(function () {
if($(this).hasClass('restart')){
$(this).removeClass('restart');
popularswiper.autoplay.start();
}else{
$(this).addClass('restart');
popularswiper.autoplay.stop();
}
});
$('.remote-online').click(function () {
if($(this).hasClass('restart')){
$(this).removeClass('restart');
onlineswiper.autoplay.start();
}else{
$(this).addClass('restart');
onlineswiper.autoplay.stop();
}
});
</script>

31
src/main/webapp/css/default.css
View File

@ -210,7 +210,7 @@ transform: rotate(45deg);
/********** 메인섹션3 **********/
.sec3 {background:#f5f5f5;padding:100px 0px 100px;}
.sec3 .inner {width:100%;position: relative;}
.sec3 .pickSwiper {width:80%;padding:1% 10%;}
.sec3 .pickSwiper {width:80%;padding:1% 10% 4%;}
.sec3 .pickSwiper::before {content: '';width:9%;height:600px;background: #f5f5f5;display: inline-block;position: absolute;left:0px;top:0px;z-index: 9;}
.sec3 .pickSwiper::after {content: '';width:9%;height:600px;background: #f5f5f5;display: inline-block;position: absolute;right:0px;top:0px;z-index: 9;}
.sec3 .swiper-button-next, .swiper-rtl .swiper-button-prev {right:30px;}
@ -227,7 +227,13 @@ transform: rotate(45deg);
.sec3 .pickSwiper .swiper-slide:hover .list-box .subject .cla {background:#376795;color:#fff;}
.underline.pink {background-image: linear-gradient(transparent 60%, #fbe8d3 40%);}
.sec3 .pickSwiper .swiper-slide:hover .underline {background-size: 100% 100%;}
.sec3 .pickSwiper .loop-count {display: inline-block;position:relative;top:50%;width:36px;height:36px;padding:2px;vertical-align: middle;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.sec3 .pickSwiper .loop-count button.remote-pick {background:none !important;position:absolute;left:0;right:0;top:0;bottom:0;width:20px;height:20px;margin:auto;border:2px solid #333;border-radius:50%;z-index:1;background-size:34px 34px;}
.sec3 .pickSwiper .loop-count button.remote-pick span {display:block;width:100%;height:100%;background:transparent url('/images/btn/btn-mainvisual-stop-black.png') no-repeat 50% 50%;}
.sec3 .pickSwiper .loop-count button.remote-pick:focus {outline:none;}
.sec3 .pickSwiper .loop-count button.remote-pick.restart span {background-image:url('/images/btn/btn-mainvisual-play-black.png');}
.sec3 .pickSwiper .pagination {position:absolute;bottom:0px;left:calc(50% - 0px);}
.sec3 .pickSwiper .swiper-pagination-fraction {color:#333;left:-40px;top:4px;}
/********** 메인섹션4 **********/
.sec4 .inner .middle-banner {background: url(/images/bg/bg-sec4-bg.jpg) no-repeat;width:100%;height:317px;background-size: cover;}
@ -250,7 +256,7 @@ transform: rotate(45deg);
transition: all 0.2s ease-in-out;
}
.sec5 .inner .tabs li.current a {background: #0a2c56;color:#fff;}
.sec5 .inner .tab_content {display:inline-block;width:1320px;background: #fff;border:1px solid #ddd;padding:30px 40px;margin-top:30px;}
.sec5 .inner .tab_content {display:inline-block;width:1320px;background: #fff;border:1px solid #ddd;padding:0px 40px;margin-top:30px;}
.sec5 .inner .tab_content .mCSB_inside > .mCSB_container {margin-right:0px !important;}
.sec5 .inner .tab_content .mCSB_scrollTools .mCSB_draggerContainer {left:-25px !important;}
.sec5 .inner .tab_content .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {background-color: rgba(0,0,0,0.55);}
@ -267,7 +273,14 @@ transition: all 0.2s ease-in-out;
.sec5 .inner .tabs_item ul li .con-2 {}
.sec5 .inner .tabs_item ul li .con-2 p {font-size:14px;color:#777;margin-bottom: 5px;}
.sec5 .inner .tabs_item ul li .con-2 p span:nth-of-type(1) {display:inline-block;font-weight:500;padding-right:10px;margin-right:10px;border-right:1px solid #ddd;height:10px;line-height:9px;}
.sec5 .popularSwiper {padding:1% 0% 4%;}
.sec5 .popularSwiper .loop-count {display: inline-block;position:relative;top:50%;width:36px;height:36px;padding:2px;vertical-align: middle;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.sec5 .popularSwiper .loop-count button.remote-popular {background:none !important;position:absolute;left:0;right:0;top:0;bottom:0;width:20px;height:20px;margin:auto;border:2px solid #333;border-radius:50%;z-index:1;background-size:34px 34px;}
.sec5 .popularSwiper .loop-count button.remote-popular span {display:block;width:100%;height:100%;background:transparent url('/images/btn/btn-mainvisual-stop-black.png') no-repeat 50% 50%;}
.sec5 .popularSwiper .loop-count button.remote-popular:focus {outline:none;}
.sec5 .popularSwiper .loop-count button.remote-popular.restart span {background-image:url('/images/btn/btn-mainvisual-play-black.png');}
.sec5 .popularSwiper .pagination {position:absolute;bottom:0px;left:calc(50% - 0px);}
.sec5 .popularSwiper .swiper-pagination-fraction {color:#333;left:-40px;top:4px;}
/********** 메인섹션6 **********/
.sec6 {padding:100px 0px 100px;}
@ -275,7 +288,7 @@ transition: all 0.2s ease-in-out;
.sec6 .inner .more-btn {position:absolute;right: calc(50% - 690px);top:30px;}
.sec6 .inner .more-btn a {}
.sec6 .inner .more-btn a span > span {margin-right:5px;}
.sec6 .onlineSwiper {padding:5px 0px;}
.sec6 .onlineSwiper {padding:1% 0px 4%;}
.sec6 .onlineSwiper::before {content: '';width:4%;height:120%;background: #fff;display: inline-block;position: absolute;left:0px;top:-10%;z-index: 9;box-shadow:30px 0px 30px rgba(255,255,255,1.0);}
.sec6 .onlineSwiper::after {content: '';width:4%;height:120%;background: #fff;display: inline-block;position: absolute;right:0px;top:-10%;z-index: 9;box-shadow:-30px 0px 30px rgba(255,255,255,1.0);}
.sec6 .onlineSwiper .swiper-slide {height:auto;border-radius:10px;/*background: #ccc;box-shadow:1px 1px 5px rgba(0,0,0,0.3);*/}
@ -314,7 +327,13 @@ transition: all 0.2s ease-in-out;
.sec6 .onlineSwiper .items .List .inner div.thumbnail div.detail-cover .btn-box .RIS a {background: #666;color:#fff;display: block;border-radius: 3px;padding:8px 0px;font-size: 14px;}
.sec6 .swiper-button-next, .swiper-rtl .swiper-button-prev {right:30px;}
.sec6 .swiper-button-prev, .swiper-rtl .swiper-button-next {left:30px;}
.sec6 .onlineSwiper .loop-count {display: inline-block;position:relative;top:50%;width:36px;height:36px;padding:2px;vertical-align: middle;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.sec6 .onlineSwiper .loop-count button.remote-online {background:none !important;position:absolute;left:0;right:0;top:0;bottom:0;width:20px;height:20px;margin:auto;border:2px solid #333;border-radius:50%;z-index:1;background-size:34px 34px;}
.sec6 .onlineSwiper .loop-count button.remote-online span {display:block;width:100%;height:100%;background:transparent url('/images/btn/btn-mainvisual-stop-black.png') no-repeat 50% 50%;}
.sec6 .onlineSwiper .loop-count button.remote-online:focus {outline:none;}
.sec6 .onlineSwiper .loop-count button.remote-online.restart span {background-image:url('/images/btn/btn-mainvisual-play-black.png');}
.sec6 .onlineSwiper .pagination {position:absolute;bottom:0px;left:calc(50% - 0px);}
.sec6 .onlineSwiper .swiper-pagination-fraction {color:#333;left:-40px;top:4px;}
/********** 메인섹션7 **********/
.sec7 {background:#f5f5f5;padding:100px 0px 100px;display: inline-block;width:100%;height:auto;}

BIN
src/main/webapp/images/btn/btn-mainvisual-play-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
src/main/webapp/images/btn/btn-mainvisual-stop-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB