Эффект изменения, появления и исчезновения текста [специальные эффекты веб-страницы]

Автор：Eve Cole Время обновления：2009-06-20 15:19:51

CSS+JS создает абсолютно классический эффект отображения новостей в виде шкива, который сейчас является абсолютно хорошим эффектом, используемым многими порталами.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML>< HEAD><TITLE>Абсолютно классическое отображение новостей (javascript+css)</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <style type="text/css" >  </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="Не удаляйте меня"></ 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>На Западе раскручивают «теорию угрозы китайских авианосцев», утверждая, что о ней было официально объявлено в 2005 году. Служба в армии</A><BR> <A href ="#" target=_self>Девушка не может о себе позаботиться и просит депутатов Всекитайского собрания народных представителей внести законопроект об эвтаназии</A><BR> <A href="#" target=_self>Министерство строительства: система жилищного обеспечения будет охватывать трудящихся-мигрантов</A><BR> <div align="right"><A href="#" target=_self>...подробнее</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>Бангладеш расправляется с коррумпированными чиновниками, все в опасности и бросают свои Mercedes-Benz и BMW на обочине дороги</A><BR> <A href="#" target=_self>Южная Корея проведет масштабные военные учения (фото и тексты)</A ><BR> <A href="#" target=_self>Фото: «Океан» обнаружен на поверхности крупнейшего спутника Сатурна </A><BR> <A href="#" target=_self>200 миллионов изъято в ходе операции по борьбе с наркотиками в Мексике Огромные суммы долларов США наличными (фото)</A><BR> <A href="# " target=_self>Фото: Глобальные протесты обнаженных людей против охоты на тюленей в Канаде</A><BR> <A href="# " target=_self>Однажды ночью на Бермудских островах пропала подводная лодка США, и на поиски была отправлена боевая группа авианосца. </A><BR> <A href="#" target=_self>200 000 демонстрантов в Венгрии были забросаны яйцами общественностью (фото)</A><BR> <div align="right"><A href ="#" target=_self>...подробнее</A></div> </SPAN> <SPAN> <A href="# " target=_self>Работница из Шэньчжэня подверглась групповому изнасилованию тремя мужчинами и ею парень был свидетелем процесса (фото)</A><BR> <A href="#" target=_self>Цена мужской коллекции десятицентовиков «Король монет» достигает 13 000 (Фото)</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>Фото: Сексуальные подарки с интимными частями мужчин и женщин, имеющими определенную форму. слишком возмутительны</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>...подробнее</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>После того, как шесть полицейских в городе Чжоукоу провинции Хэнань избили кого-то без сознания, его бросили вниз и он упал насмерть< /A><BR> <A href="#" target=_self>Фото: 69-летняя жена успешно разгладила морщины и начала новую жизнь с молодым мужем</A><BR> <A href="# " target=_self>Девушка, запертая в туалетной комнате в Цинхае, принимает клиентов более дюжины раз в день (фото)</A><BR> <A href="#" target=_self>Общие сведения в США: The People's Армия освобождения не является соперником США в ракетных атаках. Тайвань не падет</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;//Измените значение по умолчанию для ( i=1;i<len;i++){ Tags[i].value = i; Tags[i].onmouseover=function(){changeNav(this.value)}; } Tags[flag].className='topC1'; TagsCnt[flag].className='dis'; functionchangeNav(v){ Tags[ flag].className='topC0'; TagsCnt[flag].className='undis' ; flag=v; Tags[v].className='topC1'; TagsCnt[v].className='dis' } </SCRIPT > </DIV> </DIV> </BODY></HTML>