그림 스크러빙 슬라이드쇼 효과 [웹 페이지 효과]

저자：Eve Cole 업데이트 시간：2009-06-20 15:56:34

웹 페이지 특수 효과 코드, NetEase Academy의 뉴스 사진 전환 특수 효과, 자세한 텍스트 설명 및 자동 전환

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 .org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content ="text/html; charset=gb2312" /> <title>뉴스 전환 기술</title> <style type="text/css">  </style> </head> <body> <script Language="JavaScript" type="text/javascript"> nn=1; setTimeout('change_img()',6000); Change_img () { if(nn>4) nn=1 setTimeout('setFocus1('+nn+')',6000) tt=setTimeout('change_img()',6000); function setFocus1(i) selectLayer1 (i); } function selectLayer1(i) { 스위치(i) { 사례 1: document.getElementById("focusPic1").style.display="block"; document.getElementById("focusPic2").style.display= " 없음"; document.getElementById("focusPic3").style.display="none"; document.getElementById("focusPic4").style.display="none"; document.getElementById("focusPic1nav").style.display = "차단"; document.getElementById("focusPic2nav").style.display="none"; document.getElementById("focusPic3nav").style.display="none"; document.getElementById("focusPic4nav").style. display ="none"; 사례 2: document.getElementById("focusPic1").style.display="none"; document.getElementById("focusPic2").style.display="block"; focusPic3 ").style.display="none"; document.getElementById("focusPic4").style.display="none"; document.getElementById("focusPic1nav").style.display="none"; document.getElementById( " focusPic2nav").style.display="block"; document.getElementById("focusPic3nav").style.display="none"; document.getElementById("focusPic4nav").style.display="none"; 3 : document.getElementById("focusPic1").style.display="none"; document.getElementById("focusPic2").style.display="none"; document.getElementById("focusPic3").style.display=" 블록 "; document.getElementById("focusPic4").style.display="none"; document.getElementById("focusPic1nav").style.display="none"; document.getElementById("focusPic2nav").style.display= " 없음"; document.getElementById("focusPic3nav").style.display="block"; document.getElementById("focusPic4nav").style.display="none"; 사례 4: document.getElementById("focusPic1" ) .style.display="none"; document.getElementById("focusPic2").style.display="none"; document.getElementById("focusPic3").style.display="none"; " ).style.display="block"; document.getElementById("focusPic1nav").style.display="none"; document.getElementById("focusPic2nav").style.display="none"; document.getElementById(" focusPic3nav ").style.display="none"; document.getElementById("focusPic4nav").style.display="block"; break; } } </script> <div class="focusPic"> <div id=" focusPic1 " style="display:block ;"> <div class="pic"> <a href="http://www.downcodes.com"><img src="/u/info_img/2009-06/20 / 7867_2006011810122068706.jpg" alt="NetEase Academy 2005 소프트웨어 선택 결과" width="240" height="180" border="0" /></a> </div> <h2><a href="http: //www.downcodes.com">NetEase Academy의 2005년 소프트웨어 선정 결과</a></h2> <p>모두의 열정적인 투표와 노력 끝에 NetEase Academy의 2005년 소프트웨어 선정 결과가 마침내 나왔습니다. 보려면 클릭하세요...<img src="/newimg/i2.gif" alt="Details" width="3" height="5" /> <a href="http://www.downcodes.com" class ="cDRed">세부정보</a></p> </div> <div id="focusPic2" style="display: none ;"> <div class="pic"> <a href="http: / /www.downcodes.com"><img src="/u/info_img/2009-06/20/5724_200601171557008cee7.jpg" alt="정글 동물의 생존 법칙 전복" width="240" height="180 " border=" 0" /></a> </div> <h2><a href="http://www.downcodes.com">정글 동물의 생존 법칙 전복</a></h2> <p>사회적 동물 이러한 행동은 우리가 일반적으로 생각하는 동물계의 '정글의 법칙'을 뒤집는 것입니다. 동물이 모두 이기적이거나 약탈적인 것은 아닙니다. <img src="/newimg/i2.gif" alt="세부 정보" width="3" height="5" /> <a href="http://www.downcodes.com" class="cDRed"> 세부정보</a></p> </div> <div id="focusPic3" style="display: none ;"> <div class="pic"> <a href="http://www.downcodes. com"><img src="/u/info_img/2009-06/20/6541_2006011711483290a60.jpg" alt="WAPI는 무역 음모가 아닙니다" width="240" height="180" border="0" /> </ a> </div> <h2><a href="http://www.downcodes.com">WAPI는 무역 음모가 아닙니다</a></h2> <p>최근 국가는 결정 : "국내외 기업이 알고리즘을 발표했다." 중국의 WAPI 표준이 무역 음모가 아니라는 사실이 입증되었습니다. <img src="/newimg/i2.gif" alt="세부 정보" width="3" height="5" /> <a href="http://www.downcodes.com" class="cDRed"> 세부정보</a></p> </div> <div id="focusPic4" style="display: none ;"> <div class="pic"> <a href="http://www.downcodes. com"><img src="/u/info_img/2009-06/20/6650_200601171002503f251.jpg" alt="뉴 호라이즌스의 명왕성 탐사에 관한 특별 주제" width="240" height="180" border="0 " / ></a> </div> <h2><a href="http://www.downcodes.com">뉴 호라이즌스의 명왕성 탐사에 관한 특별 특집</a></h2> <p >NASA는 베이징 시간으로 18일 오전 2시 24분, 아직 인류가 탐사하지 못한 유일한 행성인 명왕성을 방문하기 위해 뉴호라이즌스 탐사선을 발사했다. <img src="/newimg/i2.gif" alt="세부 정보" width="3" height="5" /> <a href="http://www.downcodes.com" class="cDRed"> 세부정보</a></p> </div> <div class="more"> <div class="textNum"> <div class="text">> 헤드라인 뉴스 더보기</div> <div class= "num bg1" id="focusPic1nav" style="display: block;"> <ul> <li>1</li> <li><a href="javascript:setFocus1(2);" >2</a></li> <li><a href="javascript:setFocus1(3);" target="_self">3</a></li> <li><a href= "javascript :setFocus1(4);" target="_self">4</a></li> </ul> </div> <div class="num bg2" id="focusPic2nav" style="display: none; "> <ul> <li><a href="javascript:setFocus1(1);" target="_self">1</a></li> <li>2</li> <li>< a href ="javascript:setFocus1(3);" target="_self">3</a></li> <li><a href="javascript:setFocus1(4);" a></li> </ul> </div> <div class="num bg3" id="focusPic3nav" style="display: none;"> <ul> <li><a href="javascript :setFocus1 (1);" target="_self">1</a></li> <li><a href="javascript:setFocus1(2);" target="_self">2</a>< /li > <li>3</li> <li><a href="javascript:setFocus1(4);" target="_self">4</a></li> </ul> </div> <div class="num bg4" id="focusPic4nav" style="display: none;"> <ul> <li><a href="javascript:setFocus1(1);" </li> <li><a href="javascript:setFocus1(2);" target="_self">2</a></li> <li><a href="javascript:setFocus1(3 ); " target="_self">3</a></li> <li>4</li> </ul> </div> </div> </div> </div> </body> </ HTML>