[jQuery] 9.실습:stx중공업(custom scroll)

in Web on jQuery


stx중공업




/*---------- stx.css ------------*/

*{
	margin:0; 
	padding:0; 
	box-sizing:border-box;
}

li{ list-style:none;}
.wrap{
	display:flex;
}
.header{
	position:fixed; /* 고정된 레이아웃의 높이는 fixed로 height:100% 한다 */
	height:100%;
	min-width:160px;
	background: url(header_bg.gif);
	z-index:50;
}
h1{
	width:100%;
	background: #fff;
	padding:10px;
	text-align:center;
}
.nav{
	margin-top:25px;
	margin-left:40px;
}
.nav li a{
	width:95px; 
	height:15px; 
	margin-right:10px;
	background-repeat:no-repeat;
	background-position:right center;
	margin-bottom:25px;
}

.nav li:nth-child(1) a{
	background-image: url(m01_off.gif);
}
.nav li:nth-child(1):hover a{
	background-image: url(m01_on.gif);
}
.nav li:nth-child(2) a{
	background-image: url(m02_off.gif);
}
.nav li:nth-child(2):hover a{
	background-image: url(m02_on.gif);
}
.nav li:nth-child(3) a{
	background-image: url(m03_off.gif);	
}
.nav li:nth-child(3):hover a{
	background-image: url(m03_on.gif);
}
.nav li:nth-child(4) a{
	background-image: url(m04_off.gif);
}
.nav li:nth-child(4):hover a{
	background-image: url(m04_on.gif);
}
.nav li:nth-child(5) a{
	background-image: url(m05_off.gif);	
}
.nav li:nth-child(5):hover a{
	background-image: url(m05_on.gif);
}
.nav li:nth-child(6) a{
	background-image: url(m06_off.gif);	
}
.nav li:nth-child(6):hover a{
	background-image: url(m06_on.gif);
}
.nav li:nth-child(7) a{
	background-image: url(m07_off.gif);
}
.nav li:nth-child(7):hover a{
	background-image: url(m07_on.gif);
}
.nav li:nth-child(8) a{
	background-image: url(m08_off.gif);
}
.nav li:nth-child(8):hover a{
	background-image: url(m08_on.gif);
}
.nav li a{ 
	display:inline-block; 
	text-indent:-9999px;
}
.nav li:hover span{
	opacity:1;
}
.nav li span{
	display:inline-block;
	width:12px;
	height:15px;
	background-image: url(tiny_irbg.png);
	background-position: left -1200px;
	opacity:0; /* 보여라 안보여라 */
}
.content{
	position:fixed;
	width:2200px;
	left:160px;
	display:flex;
	height:100%;
}
.content article{
	flex:1;
	border: 1px solid #ddd;
	display:flex;
	flex-wrap:wrap;
	height:100%;
}
.content img{
	width:100%;
}

.footer{
	width:100%;
	position:absolute;
	padding:10px 0;
	bottom:50px;
}
.footer li a{
	border-top:#434343;
	border-bottom:#434343;
}
.footer li{
	width:95px; 
	height:15px; 
	background-repeat:no-repeat;
	background-position:right center;
	margin-bottom:25px;
	background-image: url(btn_familysite.gif);
}

.button{
	display:flex;
	position:fixed; 
	right:0; 
	top:50%;
	background: #3d3d3d;
	opacity: 0.8;
	z-index:500;
}
.button a{
	display:inline-block;
}
.button a:hover{
	background: red;
}
.prev{display:none;}
.footer li a{
	display:block;
	text-indent:-999px;
}
.mCSB_container{ 
	margin-right:0 !important; /* scroll bar 사용시 margin이 들어가지므로 margin을 0으로 해주어야함 */
}





/*---------- stx.js ------------*/

$(function(){
	$('article').mCustomScrollbar() /* 스크롤바 초기화 */ 
	$('article').mCustomScrollbar('disable')
	$('article').mouseenter(function(){
			$(this).mCustomScrollbar('update') /* 스크롤바 다시 나오게함 */
	})
	$('article').mouseleave(function(){
		$(this).mCustomScrollbar('disable') /* 스크롤바 감추기 */
	})
	var count=0	
	$('.next').click(function(e){
		e.preventDefault
		if(count<5){
			count=count+1 
			//alert(count)로 확인
			$('section').animate({'left':'-=440px'})
			$('.prev').css({'display':'block'})
		}else{
			$('section').animate({'left':'160px'})
			count=0
			$('.prev').css({'display':'none'})
		}
	})
	$('.prev').click(function(e){
		e.preventDefault
		if(count>0){
			count=count-1 
			//alert(count)로 확인
			$('section').animate({'left':'+=440px'})
			if(count==0)
				$('.prev').css({'display':'none'})
		}
	})
	
})





<!-----------------------stx.html ----------------------->
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>stx중공업</title>
	<link rel="stylesheet" href="stx.css">
	
	<!--mCustomScrollbar.css -->
	<link rel="stylesheet" href="jquery.mCustomScrollbar.css" /> 
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<!--mCustomScrollbar.js -->
	<script type="text/javascript" src="jquery.mCustomScrollbar.js"></script>
	<script src="stx.js"></script>
</head>
<body>
<div class="wrap">
	<div class="header">
		<h1><img src="logo.gif" alt=""></h1>
		<ul class="nav">
			<li><a href="#">회사소개</a><span></span></li>
			<li><a href="#">사업분야</a><span></span></li>
			<li><a href="#">투자정보</a><span></span></li>
			<li><a href="#">지속가능경영</a><span></span></li>
			<li><a href="#">홍보센터</a><span></span></li>
			<li><a href="#">인재채용</a><span></span></li>
			<li><a href="#">고객지원</a><span></span></li>
			<li><a href="#">기업회생게시판</a><span></span></li>
		</ul>
		<ul class="footer">
			<li><a href="#">FAMILYSITE</a></li>
		</ul>
		<ul class="foot-nav">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	<section class="content">
		<article><img src="vis_sec_biz.jpg" alt="">
		<img src="vis_sec_biz.jpg" alt="">
		<img src="vis_sec_biz.jpg" alt=""></article>
		<article><img src="vis_sec_company.jpg" alt=""><img src="vis_sec_company.jpg" alt="">
		<img src="vis_sec_company.jpg" alt=""></article>
		<article><img src="vis_sec_pr.jpg" alt=""><img src="vis_sec_pr.jpg" alt="">
		<img src="vis_sec_pr.jpg" alt=""></article>
		<article><img src="vis_sec_ir.jpg" alt=""><img src="vis_sec_ir.jpg" alt="">
		<img src="vis_sec_ir.jpg" alt=""></article>
		<article><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1902.2170478897792!2d127.0622191620957!3d37.65605608752024!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357cb9153e537f41%3A0xbc5ef2cb727fd8af!2z64W47JuQ7JetLuuhr-uNsOuwse2ZlOygkA!5e1!3m2!1sko!2skr!4v1531875213841" width="438" height="400" frameborder="0" style="border:0" allowfullscreen></iframe></article>
	</section>
	<div class="button">
		<div class="prev"><a href="#"><img src="btn_slide_prev.png" alt="" ></a></div>
		<div class="next"><a href="#" ><img src="btn_slide_next.png" alt="" ></a></div>
	</div>
</div>
</body>
</html>




실행결과