[가 져 오기] 뉴스 리스트 슬라이더 효과

[가 져 오기] 뉴스 리스트 슬라이더 효과
저자: tianshi 0253  링크:http://tianshi0253.javaeye.com/blog/205005  발표 일: 2008 년 06 월 18 일
성명: 본 고 는 자바 아이 사이트 가 발표 한 오리지널 블 로그 글 로 작가 의 서면 허가 없 이 어떠한 사이트 에서 도 본 고 를 옮 기 는 것 을 금지한다. 그렇지 않 으 면 반드시 법률 적 책임 을 추궁 할 것 이다!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0026)http://www.popuni.com/ -->
<HTML><HEAD><TITLE>           (javascript+css)</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<style type="text/css">
<!--
BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; COLOR: black; LINE-HEIGHT: 150%; PADDING-TOP: 10px; BACKGROUND-COLOR: white; TEXT-ALIGN: center
}
.dis {
	DISPLAY: block
}
.undis {
	DISPLAY: none
}
#cntR {
	WIDTH: 302px
}
#NewsTop {
	CLEAR: both; MARGIN-BOTTOM: 16px
}
#NewsTop P {
	FLOAT: left; LINE-HEIGHT: 21px
}
#NewsTop P.topTit {
	FONT-WEIGHT: bold; WIDTH: 117px
}
#NewsTop P.topC0 {
	BACKGROUND: #dcdcdc; BORDER-LEFT: #f2f2f2 1px solid; WIDTH: 40px; CURSOR: pointer
}
#NewsTop P.topC1 {
	BACKGROUND: #c2130e; BORDER-LEFT: #f2f2f2 1px solid; WIDTH: 40px; COLOR: #fff
}
#NewsTop #NewsTop_tit {
	BORDER-BOTTOM: #c2130e 3px solid; HEIGHT: 21px
}
#NewsTop #NewsTop_cnt {
	PADDING-LEFT: 32px; BACKGROUND: url(http://www.popuni.com/attachments/month_0703/o2007320133249.gif) no-repeat 12px 13px; LINE-HEIGHT: 26px; PADDING-TOP: 7px; HEIGHT: 260px; TEXT-ALIGN: left
}
#NewsTop #NewsTop_cnt A {
	COLOR: #666; TEXT-DECORATION: none
}
#NewsTop #NewsTop_cnt A:hover {
	COLOR: #c2130e; TEXT-DECORATION: underline
}
-->
</style>
</HEAD>
<BODY>
<DIV id=cntR>
  <DIV id=NewsTop>
    <DIV id=NewsTop_tit>
      <P class=topTit>    </P>
      <P class=topC0>  </P>
      <P class=topC0>  </P>
      <P class=topC0>  </P>
      <P class=topC0>  </P>
    </DIV>
    <DIV id=NewsTop_cnt><SPAN title="Don't delete me"></SPAN>
	<SPAN>
	  <A href="#" target=_self>                    </A><BR>
      <A href="#" target=_self>   :                 </A><BR>
      <A href="#" target=_self>   : 70               </A><BR>
      <A href="#" target=_self>                  ( )</A><BR>
      <A href="#" target=_self>                     </A><BR>
      <A href="#" target=_self>    :                </A><BR>
      <A href="#" target=_self>                     </A><BR>
      <A href="#" target=_self>    "       " 05      </A><BR>
      <A href="#" target=_self>                    </A><BR>
      <A href="#" target=_self>   :             </A><BR>
	  <div align="right"><A href="#" target=_self>...more</A></div>
    </SPAN>
	<SPAN>
	    <A href="#" target=_self>                  ( )</A><BR>
        <A href="#" target=_self>  :          </A><BR>
        <A href="#" target=_self>                (  )</A><BR>
        <A href="#" target=_self>                    </A><BR>
        <A href="#" target=_self>            (  )</A><BR>
        <A href="#" target=_self>  :          “  ”</A><BR>
        <A href="#" target=_self>         2       (  )</A><BR>
        <A href="#" target=_self>  :                 </A><BR>
        <A href="#" target=_self>                   </A><BR>
        <A href="#" target=_self>   20             (  )</A><BR>
		<div align="right"><A href="#" target=_self>...more</A></div>
      </SPAN>
	  <SPAN>
	      <A href="#" target=_self>                 (  )</A><BR>
          <A href="#" target=_self>       “  ”    1.3 ( )</A><BR>
          <A href="#" target=_self>                ( )</A><BR>
          <A href="#" target=_self>  :         69       </A><BR>
          <A href="#" target=_self>                10    </A><BR>
          <A href="#" target=_self>                  ( )</A><BR>
          <A href="#" target=_self>  :       “ ”      </A><BR>
          <A href="#" target=_self>  :    16           </A><BR>
          <A href="#" target=_self>   :                 </A><BR>
          <A href="#" target=_self>             :  1    </A><BR>
		  <div align="right"><A href="#" target=_self>...more</A></div>
        </SPAN>
		<SPAN>
		  <A href="#" target=_self>                    </A><BR>
            <A href="#" target=_self>20                    </A><BR>
            <A href="#" target=_self>                     </A><BR>
            <A href="#" target=_self>                   </A><BR>
            <A href="#" target=_self>     6             </A><BR>
            <A href="#" target=_self>  :69                </A><BR>
            <A href="#" target=_self>                ( )</A><BR>
            <A href="#" target=_self>   :                 </A><BR>
            <A href="#" target=_self>                  </A><BR>
            <A href="#" target=_self>          :          </A><BR>
			<div align="right"><A href="#" target=_self>...more</A></div>
        </SPAN>
		</DIV>
            <SCRIPT>
				var Tags=document.getElementById('NewsTop_tit').getElementsByTagName('p'); 
				var TagsCnt=document.getElementById('NewsTop_cnt').getElementsByTagName('span'); 
				var len=Tags.length; 
				var flag=1;//     
				for(i=1;i<len;i++){
					Tags[i].value = i;
					Tags[i].onmouseover=function(){changeNav(this.value)}; 
					TagsCnt[i].className='undis';					
				}
				Tags[flag].className='topC1';
				TagsCnt[flag].className='dis';
				function changeNav(v){	
					Tags[flag].className='topC0';
					TagsCnt[flag].className='undis';
					flag=v;	
					Tags[v].className='topC1';
					TagsCnt[v].className='dis';
				}
			</SCRIPT>
  </DIV>
</DIV>
</BODY></HTML>

 
본문의 토론 도 매우 훌륭 하 다. 토론 을 훑 어보 자 > >
JavaEye 추천
  • 베 이 징: 천 오 크 그룹 및 교 내 망 은 소프트웨어 연구 개발 엔지니어
  • 를 성 실 히 초빙 한다.
  • 소 후 사이트 에서 자바, PHP, C + + 엔 지 니 어 를 성 실 히 초빙 합 니 다
  • 즉시 신청, 무료 입장권 획득, SOA 기술 포럼 (광저우 6 월 19 일)
  • 참가
  • Oracle 전문 지역 이 출시 되 었 습 니 다. Oracle 최신 글, 중요 다운로드 및 지식 창고 등 멋 진 내용 이 있 습 니 다. 방문 을 환영 합 니 다.

  • 글 의 출처:http://tianshi0253.javaeye.com/blog/205005

    좋은 웹페이지 즐겨찾기