jquery 특수 효과 슬라이드 효과 샘플 code_jquery

<머리>


<스타일>
/* CSS 문서 */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td, blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin: 0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif; 텍스트 정렬:가운데; 여백:0 자동; }
테이블{border-collapse:collapse;border-spacing:0;}
a{ color:#333; 텍스트 장식:없음;}
.box{ 너비:420px; 여백:20px 자동; 위치:상대적; 오버플로:숨김; 텍스트 정렬:왼쪽;}
.box img{border:0px; 너비:420px;}
.big{ 너비:100%; 부동:왼쪽; 높이:196px; 오버플로:숨김; margin-bottom:2px;}
.big a{ 디스플레이:none;}
.big 스팬{ position:absolute; 왼쪽:0; 상단:167px; 글꼴 크기:13px; 색상:#fff; Z-색인:11; 높이:30px; 줄 높이:30px; 텍스트 들여쓰기:1em; 너비:100%; )}
.num{ 너비:424px; 여백 오른쪽:-24px; 부동:왼쪽; 높이:53px; padding-top:2px;}
.num li{ 너비:99px; 패딩 상단:5px; 왼쪽 패딩:1px; 커서:포인터; 부동:왼쪽; margin-right:6px;height:48px;}
.num img{ width:98px;}
.num li.on{ background:url(../images/bg01.gif) no-repeat 0 0 ;}
.txtbg{ 위치:절대; 왼쪽:0; 상단:167px; 너비:100%; 높이:30px; 배경:#000; 불투명도:0.5;필터:알파(불투명도=50); z-index:10;}




<본문>