[jQuery] 8.custom scroll

in Web on jQuery


custom scroll




제이쿼리에서는 스크롤 바도 지원합니다!

보통 스크롤과 다른 좀 더 세련된 스크롤 바인데요~

먼저 다음 사이트 manos.malihu.gr에서 jquery.mCustomScrollbar.css와 jquery.mCustomScrollbar.js 파일을 받아야합니다. 


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Scroller</title>
	<!--mCustomScrollbar.css -->
	<link rel="stylesheet" href="jquery.mCustomScrollbar.css" /> 
	
	<style>
		.box{ /* mCustomScrollbar 는 자동으로 div 박스가 쌓여지기 때문에 css를 넣으려면 꼭 클래스 명을 지정해주어야한다. */
			 width:270px; 
			 height:270px; 
		}
		/*.mCSB_container{ 
			margin-right:0 !important; /* scroll bar 사용시 margin이 들어가지므로 margin을 필요에 따라 지정해주어야함 */
		}*/
	</style>
	<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>
   $(function(){	
		
		$(".box").mCustomScrollbar({
		
		});
	
	});
</script>
	
</head>
<body>
	<div class="box">
		'해피투게더3' 김지민이 전현무 한혜진 커플을 응원하면서 현실적인 조언을 해 눈길을 끌었습니다.

		어제(19일) 방송된 KBS 2TV '해피투게더3'에는 이소라, 홍석천, 나르샤, 김지민, 김민경이 게스트로 출연했습니다.

		다양한 이야기가 오가던 중 김지민은 전현무와의 스캔들로 껄끄럽지 않냐는 질문에 "오히려 축하해 드리고 싶었다"면서 웃지 못할 충고를 덧붙였습니다. 

		김지민은 "두 분의 열애 소식을 듣고 사실 축하해주고 싶었는데 연락을 못했다. 혹시 그 분이 언짢아하실 수도 있고 같이 계시면 실례가 될 수도 있지 않나"라며 "진심으로 축하드린다"고 말해 눈길을 모았다.

		그러면서도 김지민은 
		"경조사 가면 사진을 같이 찍잖냐. 웬만하면 멀리 떨어져 찍거나 공식석상에 가지 마라"고 말했습니다. 

		김지민은 "저는 많이 낭패를 봤다. 저희 큰언니 결혼식 사진에 아직도"라며 말끝을 흐렸습니다. 

		이어 김지민은 "큰언니가 사진을 걸고 싶은데 (전현무의 모습이 있어서) 못 걸겠다더라"고 말해 웃음을 안겼습니다.
		
		'해피투게더3' 김지민이 전현무 한혜진 커플을 응원하면서 현실적인 조언을 해 눈길을 끌었습니다.

		어제(19일) 방송된 KBS 2TV '해피투게더3'에는 이소라, 홍석천, 나르샤, 김지민, 김민경이 게스트로 출연했습니다.

		다양한 이야기가 오가던 중 김지민은 전현무와의 스캔들로 껄끄럽지 않냐는 질문에 "오히려 축하해 드리고 싶었다"면서 웃지 못할 충고를 덧붙였습니다. 

		김지민은 "두 분의 열애 소식을 듣고 사실 축하해주고 싶었는데 연락을 못했다. 혹시 그 분이 언짢아하실 수도 있고 같이 계시면 실례가 될 수도 있지 않나"라며 "진심으로 축하드린다"고 말해 눈길을 모았다.

		그러면서도 김지민은 
		"경조사 가면 사진을 같이 찍잖냐. 웬만하면 멀리 떨어져 찍거나 공식석상에 가지 마라"고 말했습니다. 

		김지민은 "저는 많이 낭패를 봤다. 저희 큰언니 결혼식 사진에 아직도"라며 말끝을 흐렸습니다. 

		이어 김지민은 "큰언니가 사진을 걸고 싶은데 (전현무의 모습이 있어서) 못 걸겠다더라"고 말해 웃음을 안겼습니다.
	
	</div>
</body>
</html>




실행결과




실습:정원e샵




/*----------- jungwon.css -----------------*/

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
li{
	list-style:none;
}
.main{
	position:fixed;
	width: 1920px;
	margin:auto;
	height:776px;
	background: url(main1.jpg);
}
.main>img{
	position:absolute;
}
.wrap{
	position:relative;
	width:1300px;
	height:460px;
	margin:100px auto;	
}
.submain{
	float:right;
	width:760px;
	height:540px;
}
.nav{
	position:absolute;
	width:246px;
	height:460px;
}
.nav li{
	height:92px;
	border-bottom:1px solid rgba(255,255,255,0.2);
	display:flex;
	padding:10px;
	color:#fff;
	opacity:0.5;
	cursor:pointer;
}
.nav img{
	width:54px;
	height:54px;
}
.nav p{
	padding: 4px 0 6px 18px;
}





/*----------- jungwon.js -----------------*/

 $(function(){	
	$(".nav").mCustomScrollbar({ })
	$(".nav li").click(function(){
		var id=this.getAttribute('id')
		$('.main>img').attr({'src':id})
		var cl=this.getAttribute('class')
		$('.submain img').attr({'src':cl})
		$('.nav li').css({'opacity':'0.5'})
		$(this).css({'opacity':'1'})
	})	
});





<!-------------------jungwon.html------------------->
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>정원e샵</title>
	<link rel="stylesheet" href="jungwon.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="jungwon.js"></script>
</head>
<body>
	<div class="main">
		<img src="main1.jpg" alt="">
		<div class="wrap">
			<ul class="nav">
				<li id="main1.jpg" class="main1-sub.png"><img src="nav1.png" alt=""><p>기분좋은만남<br>이벤트</p></li>
				<li id="main2.jpg" class="main2-sub.png"><img src="nav2.png" alt=""><p>스마일페이<br>기획전</p></li>
				<li id="main3.jpg" class="main3-sub.png"><img src="nav3.png" alt=""><p>클래식<br>기획전</p></li>
				<li id="main4.jpg" class="main4-sub.png"><img src="nav4.png" alt=""><p>잭팟<br>이벤트</p></li>
				<li id="main5.jpg" class="main5-sub.png"><img src="nav5.png" alt=""><p>공감리워드<br>이벤트</p></li>
				<li id="main6.jpg" class="main6-sub.png"><img src="nav6.png" alt=""><p>나만의김치<br>상품평</p></li>
				<li id="main7.jpg" class="main7-sub.png"><img src="nav7.png" alt=""><p>안주夜<br>이벤트</p></li>
			</ul>
			<div class="submain">
				<img src="main1-sub.png" alt="">
			</div>
		</div>
	</div>
</body>
</html>




실행결과