3초기억력

랭킹 scroll. nth-child 사용한 css 제어 본문

코딩_jquery

랭킹 scroll. nth-child 사용한 css 제어

잠수콩 2013. 3. 28. 10:53
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.



제목 :  랭킹 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 를 각각 변경.

 

 

 



예제 소스 파일 :


 


저작자표시 비영리 변경금지

'코딩_jquery' 카테고리의 다른 글

열 계산 jquery  (0) 2013.11.06
jquery, ajax, json - autoscroll 샘플  (0) 2013.10.31
반응형 테이블, 소스코드 첨부  (0) 2013.03.28
jquery, ajax, xml 활용한 도움말 layer 보여주기  (0) 2013.01.22
jquery, jstree 사용. 자식노드 선택시 부모노드 선택하는 스크립트  (0) 2013.01.15
'코딩_jquery' Related Articles more
Comments