썸네일 제이쿼리

좌측에 원하는 형태의 이미지가 나오고 우측에는 메뉴들이 나열 되어있는데

커서를 가리키면 좌측 이미지가 달라지는 기능이다.

jquery.featureList-1.0.0.js

style.css 와 함께 jquery.featureList-1.0.0.js 파일을 최상단에 읽어올 수 있도록 해주고

var $b = jQuery.noConflict();
$b(document).ready(function() {

$b.featureList(
$b("#tabs li a"),
$b("#output li"), {
start_item	:	0
});
});

제이쿼리 영역을 입력 해둔뒤

		


		
			

				

				
			
			

			
			

				

					
자세히

				
			
			

		
	

여기까지 DOM 구조를 입력 해준뒤 *.css 를 아래와 같이 해준다

#content {
width: 1024px;
height: 405px;
margin: 0 auto;
border: 1px solid #CCC;
margin-bottom: 20px;
}
 
div#feature_list {
width: 1024px;
height: 405px;
overflow: hidden;
position: relative;
}
 
div#feature_list ul {
position: absolute;
top: 0;
list-style: none;  
padding: 0;
margin: 0;
}
 
ul#tabs {
right: 0;
z-index: 10;
width: 200px;
font-family: 나눔바른고딕, NanumBarunGothic, nbg, 나눔고딕, NanumGothic, dotum, gulim, sans-serif;
font-weight: bold;
}
 
ul#tabs li {
}
         
ul#tabs li img {
float: left;
}
 
ul#tabs li a {
height: 26px;
display: block;
outline: none;
color: #444444;
padding: 8px 0 0 35px;
}
 
ul#tabs li a:hover {
text-decoration: none;
color: #444444;
}
 
 
/* 여기서 부터 배경 인자 시작 */
ul#tabs li .co1 a.current {
background:  url('tab.png');
background-repeat: no-repeat;
color: #ff3d3d;
}
/* 여기서 부터 배경 인자 끝 */
 
 
ul#tabs li a.current:hover {
text-decoration: none;
cursor: default;
}
 
ul#output {
left: 0;
width: 854px;
height: 405px;
position: relative;
}
 
ul#output li {
position: absolute;
width: 854px;
height: 405px;
}
 
ul#output li div a {
position: absolute;
bottom: 10px;
left: 10px;
padding: 8px 12px;
text-decoration: none;
font-size: 11px;
color: #FFF;
background: #000;
-moz-border-radius: 5px;
}
         
ul#output li div a:hover {
background: #D33431;
}