Русский
Код специальных эффектов веб-страницы, специальные эффекты переключения изображений новостей 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"> <!-- body { text-align: center Margin:0; : 0; фон: #FFF; размер шрифта: 12 пикселей; цвет: # 000;} div, form, img, ol, li, dl, dt, dd {поле: 0; граница: 0; } h1,h2,h3,h4,h5,h6 {маржа:0; дополнение:0;} table,td,tr,th{font-size:12px;} a:link {color: #000; text-decoration: нет;} a:visited {color: #83006f;text-decoration:none;} a:hover {color: #c00; text-decoration:underline;} a:active {color: #000;} .focusPic{margin: 0 авто; ширина: 244 пикселей;} .focusPic .pic{margin:0 auto; высота: 180 пикселей; отступ: 2 пикселя 0 0;} .focusPic .adPic {margin:0 auto 5 пикселей; высота: 29px ; overflow:hidden;background:url(/u/info_img/2009-06/20/4147_adpic.gif);} .focusPic .adPic .text{float:right; padding:9px 4px 0 0; . focusPic .adPic .text a{color:#1f3a87;} .focusPic .adPic .text a:hover{color:#bc2931;} .focusPic h2{ float:left; width:232px;padding:4px 0 3px 12px; - size:14px; text-align:left;} .focusPic p{float:left; width:226px;line-height:160%; text-align:left;padding:0 0 10px 12px;} . focusPic p img {margin:0px 0 2px;} .focusPic .more {margin:0 auto; 240px; } .focusPic .more .textNum{float:right;margin:0 8px 0 0;padding:0 0 4px; } .focusPic .more .textNum .text{float:left; шрифт-вес:жирный; дополнение:7px 6px 0 0; цвет:#666;} .focusPic .more .textNum .num{float:left; height :19px;} .focusPic .more .textNum .bg1{background:url(/u/info_img/2009-06/20/9415_num1.gif);} .focusPic .more .textNum .bg2{background:url(/u / info_img/2009-06/20/7390_num2.gif);} .focusPic .more .textNum .bg3{background:url(/u/info_img/2009-06/20/5391_num3.gif);} .focusPic .more . textNum .bg4{background:url(/u/info_img/2009-06/20/6709_num4.gif);} .focusPic .more .textNum .num ul{ float:left; width:113px;} .focusPic .more .textNum . num li {float: left; ширина: 28 пикселей; шрифт-вес: жирный; дисплей: блок; цвет: # fff; тип списка: нет; заполнение: 6 пикселей 0 0;} .focusPic .more .textNum .num li a{color:#fff; padding:0 5px; } .focusPic .more .textNum .num li a:visited{color:#fff;} .focusPic .more .textNum .num li a:hover{color:#ff0 } --> </style> </head> <body> <script Language="JavaScript" type="text/javascript"> var nn; setTimeout('change_img()',6000); Change_img () { if(nn>4) nn=1 setTimeout('setFocus1('+nn+')',6000 nn++; tt=setTimeout('change_img()',6000 } function setFocus1(i) { selectLayer1 (i); } function selectLayer1(i) { switch(i) { case 1: document.getElementById("focusPic1").style.display="block"; document.getElementById("focusPic2").style.display= " none"; 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"; document.getElementById(" 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= " none"; 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"; document.getElementById("focusPic4) " ).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"; перерыв; } } </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="Подробнее" 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="Details" 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="Details" 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="Специальная тема об исследовании Плутона аппаратом New Horizons" width="240" height="180" border="0 " / ></a> </div> <h2><a href="http://www.downcodes.com">Специальный специальный материал об исследовании Плутона аппаратом New Horizons</a></h2> <p >НАСА будет Зонд «Новые горизонты» был запущен в 2:24 утра 18-го числа по пекинскому времени с целью посетить Плутон, единственную планету, которая еще не исследована человеком. <img src="/newimg/i2.gif" alt="Details" 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);" target=" _self" >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);" target="_self">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);" target="_self">1</ a> </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>