2022/12/01 튜토리얼 이미지 수정, 버튼 추가
@ -2,7 +2,10 @@ body{position: relative; width: 100%; height: 100%;}
|
||||
.tutorial{width: 100%; height: 100%; overflow-x: hidden;}
|
||||
.tutorial img{position: absolute;width:100%; left: 50%;top: 0;transform: translateX(-50%);}
|
||||
.mask{position: fixed; display: flex; width: 100%; height: 100%; left: 0; top: 0; z-index: 5;}
|
||||
.left_mask,.right_mask{width: 50%; height: 100%; background-color: transparent;}
|
||||
.left_mask,.right_mask{width: 50%; height: 100%; background-color: transparent; background-repeat: no-repeat;}
|
||||
.left_mask{background-image: url(/kccadrPb/tutorial/image/prev_btn.png); background-position: 10% center;}
|
||||
.left_mask.first,.right_mask.last{background-image: none;}
|
||||
.right_mask{background-image: url(/kccadrPb/tutorial/image/next_btn.png);background-position: 90% center;}
|
||||
@media all and (max-width: 1800px){
|
||||
.tutorial img{width: 100%; min-width: 1680px;}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 99 KiB |
|
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 91 KiB |
BIN
src/main/webapp/kccadrPb/tutorial/image/next_btn.png
Normal file
|
After Width: | Height: | Size: 4.9 KiB |
BIN
src/main/webapp/kccadrPb/tutorial/image/prev_btn.png
Normal file
|
After Width: | Height: | Size: 4.9 KiB |
@ -20,6 +20,7 @@
|
||||
if(imgSrc.indexOf("19.gif") > -1){
|
||||
$("img").attr("src","/kccadrPb/tutorial/image/18.gif");
|
||||
$("body,html").animate({scrollTop : 600}, 400);
|
||||
$(".right_mask").removeClass("last");
|
||||
}else if(imgSrc.indexOf("18.gif") > -1){
|
||||
$("img").attr("src","/kccadrPb/tutorial/image/17.gif");
|
||||
$("body,html").animate({scrollTop : 400}, 400);
|
||||
@ -69,6 +70,7 @@
|
||||
}else if(imgSrc.indexOf("02.gif") > -1){
|
||||
$("img").attr("src","/kccadrPb/tutorial/image/01.gif");
|
||||
$("body,html").animate({scrollTop : 0}, 400);
|
||||
$(".left_mask").addClass("first");
|
||||
}
|
||||
});
|
||||
|
||||
@ -77,6 +79,7 @@
|
||||
if(imgSrc.indexOf("01.gif") > -1){
|
||||
$("img").attr("src","/kccadrPb/tutorial/image/02.gif");
|
||||
$("body,html").animate({scrollTop : 400}, 400);
|
||||
$(".left_mask").removeClass("first");
|
||||
}else if(imgSrc.indexOf("02.gif") > -1){
|
||||
$("img").attr("src","/kccadrPb/tutorial/image/03.gif");
|
||||
}else if(imgSrc.indexOf("03.gif") > -1){
|
||||
@ -127,6 +130,7 @@
|
||||
}else if(imgSrc.indexOf("18.gif") > -1){
|
||||
$("img").attr("src","/kccadrPb/tutorial/image/19.gif");
|
||||
$("body,html").animate({scrollTop : 300}, 400);
|
||||
$(".right_mask").addClass("last");
|
||||
}
|
||||
|
||||
});
|
||||
@ -135,7 +139,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="mask">
|
||||
<div class="left_mask"></div>
|
||||
<div class="left_mask first"></div>
|
||||
<div class="right_mask"></div>
|
||||
</div>
|
||||
<div class="tutorial">
|
||||
|
||||