랭킹 scroll. nth-child 사용한 css 제어
제목 : 랭킹 scroll. nth-child 사용한 css 제어
소스 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> main rank scroll </title>
<link rel="stylesheet" type="text/css" href="./css/main.css" />
<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="main_cont">
<div class="cont1">
<div class="rate">
<ul id="tested">
<li class="end1">sm5 520 <strong class="dwn">256만 (▲)</strong></li>
<li class="end">sm5 520 <strong class="up">256만 (▲)</strong></li>
<li class="nxt">k5 2.4gdi 프레스티지 <strong class="dwn">256만 (▼)</strong></li>
<li class="sel">K7 VG240 디럭스 스페셜 <strong class="stp">256만 (-)</strong></li>
<li class="nxt">i-30 1.6 vvt luxury <strong class="up">256만 (▲)</strong></li>
<li class="end">그랜드 스타렉스 3인승 van <strong class="dwn">256만 (▼)</strong></li>
<li class="end1">그랜드 스타렉스 3인승 van <strong class="up">256만 (▼)</strong></li>
</ul>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
<!--
function tested() {
var tested = $('#tested');
tested.animate({marginTop:'-25px'}, 300, null, function() {
tested.css('margin-Top', '0px').append(tested.find('> li:first'));
tested.find('li:nth-child(1)').attr("class","end1");
tested.find('li:nth-child(2)').attr("class","end");
tested.find('li:nth-child(3)').attr("class","nxt");
tested.find('li:nth-child(4)').attr("class","sel");
tested.find('li:nth-child(5)').attr("class","nxt");
tested.find('li:nth-child(6)').attr("class","end");
tested.find('li:nth-child(7)').attr("class","end1");
/* 위와 동일한 효과. index가 다를뿐
tested.find('li:eq(0)').attr("class","end1");
tested.find('li:eq(1)').attr("class","end");
tested.find('li:eq(2)').attr("class","nxt");
tested.find('li:eq(3)').attr("class","sel");
tested.find('li:eq(4)').attr("class","nxt");
tested.find('li:eq(5)').attr("class","end");
tested.find('li:eq(6)').attr("class","end1");
*/
});
}
setInterval('tested()', 1500);
//-->
</script>
</html>
내용 :
li의 내용을 animate 하면서, 최상단으로 1개씩 끌어올린다.
그 후, 7개의 css 를 각각 변경.
예제 소스 파일 :