Как реализовать эффекты прокрутки текста, соответствующие веб-стандартам

Автор：Eve Cole Время обновления：2009-05-31 00:37:26

Поскольку тег marquee сейчас используется все меньше и меньше, большинство эффектов прокрутки реализованы с помощью JavaScript. Тем, кто не понимает, почему бы просто не использовать тег marquee, лучше сначала прочитать эту статью.

Используйте JavaScript для имитации подхода Marquee.

Ниже приводится цитируемое содержание:

<!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">
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Горячие новости webjx.com</title>
<style type="text/css">

</стиль>
</голова>

<тело>
<h4>Актуальные новости</h4>
<script Language="JavaScript" type="text/javascript">
вар marqueeContent = новый массив ();
marqueeContent[0]="<a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>Используйте Dream Security, чтобы быстро получить пароль своей учетной записи</ а>";
marqueeContent[1]="<a href=http://ekey.163.com/ target=_blank>Официальный веб-сайт общего порядка NetEase</a>";
marqueeContent[2]="<a href=http://xyq.163.com/download/wallpaper.htm target=_blank>Последние загрузки обоев</a>";
marqueeContent[3]="<a href=http://xyq.163.com/download/around.htm target=_blank>Загрузка последней заставки</a>";
вар marqueeInterval = новый массив ();
вар marqueeId=0;
вар marqueeDelay = 2000;
вар marqueeHeight = 20;
функция initMarquee() {
вар стр = marqueeContent [0];
document.write('<div id="marqueeBox" style="overflow:hidden;width:250px;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]= setInterval('startMarquee()',marqueeDelay)"><div>'+str+'</div></div>');
marqueeId++;
marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
}
функция startMarquee() {
вар стр = marqueeContent [marqueeId];
marqueeId++;
if(marqueeId>=marqueeContent.length) marqueeId=0;
if(document.getElementById("marqueeBox").childNodes.length==1) {
вар nextLine=document.createElement('DIV');
nextLine.innerHTML=str;
document.getElementById("marqueeBox").appendChild(nextLine);
}
еще {
document.getElementById("marqueeBox").childNodes[0].innerHTML=str;
document.getElementById("marqueeBox").appendChild(document.getElementById("marqueeBox").childNodes[0]);
document.getElementById("marqueeBox").scrollTop=0;
}
ClearInterval(marqueeInterval[1]);
marqueeInterval[1]=setInterval("scrollMarquee()",20);
}
функция ScrollMarquee() {
document.getElementById("marqueeBox").scrollTop++;
if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){
ClearInterval(marqueeInterval[1]);
}
}
initMarq<div><font color=#999999 title="Первая страница"><font face="webdings">9</font></font>
<font color=#999999 title="Предыдущие десять страниц"><font face="webdings">7</font></font>
<font color=#999999 title="Предыдущая страница"><font face="webdings">3</font></font>
<b>1</b>
<a href="./142220269IF5J4C4E387110_2.html">2</a>
<a href="./142220269IF5J4C4E387110_3.html">3</a>
<a href="./142220269IF5J4C4E387110_2.html" title="следующая страница"><font face="webdings">4</font></a>
<font color=#999999 title="Следующие десять страниц"><font face="webdings">8</font></font>
<a href="./142220269IF5J4C4E387110_3.html" title="Последняя страница"><font face="webdings">:</font></a>
</div></div>

<div class="art_detail_now">Вы читаете статью:
<span>Как реализовать эффекты прокрутки текста, соответствующие веб-стандартам</span><br />
● Ключевые слова:
<диапазон>

<script Language="javascript" src="/ad/adnav.js"></script></span><br />
Предыдущая статья: <label id="PrevPage_9IF5J4C4E387110"></label><script Language="JavaScript" type="text/javascript" src="http://www.cz268.com.cn/Showpage.asp?Id = 9IF5J4C4E387110&Type=NS&PageType=PrevPage"></script><br />
Следующая статья: <label id="NextPage_9IF5J4C4E387110"></label><script Language="JavaScript" type="text/javascript" src="http://www.cz268.com.cn/Showpage.asp?Id = 9IF5J4C4E387110&Type=NS&PageType=NextPage"></script></div>
<div class="art_detail_list">
<span>Статьи по теме</span>

<ул>

<li><a href="/Design/w3c/1623584026185I9KAFFJCCG.html">Предварительное исследование крупномасштабной технологии создания сайтов Web2.0</a> 16 октября 2007 г.</li>

<li><a href="/Design/w3c/142225888I21I6FFC808716.html">Четыре метода настройки размера текста в веб-дизайне</a> 14 октября 2007 г.</li>

<li><a href="/Design/w3c/142224258035241B9KH76II.html">Не весь контент в веб-дизайне должен использовать DIV в качестве «контейнера».</a> 14 октября 2007 г.</li>

<li><a href="/Design/w3c/142222952EAH1AAG8J73G9I.html">Несколько способов решения проблемы, заключающейся в том, что версии ниже IE7 не поддерживают псевдоклассы A-состояния.</a> 14 октября 2007 г.</li>

<li><a href="/Design/w3c/14222022KII5I8FFEFGBBEH.html">Спецэффекты обратного отсчета до открытия Олимпийских игр 2008 года в Пекине, простая демонстрация! </a> 14 октября 2007 г.</li>

<li><a href="/Design/w3c/42424628G7K05J96984BB.html">Настройка кода CSS для подчеркивания гиперссылки на веб-странице</a> 04.10.2007</li>
</ul>
</div>
</div>
<div class="r">
<div class="nav">
<div class="nav_title">
<div id="n1">268 База знаний для веб-мастеров</div>
</div>
<div class="nav_list">
<ул>
<li><a href="http://www.cz268.com.cn/Design/Pages/">Веб-страница</a> </li>
<li><a href="http://www.cz268.com.cn/Design/Edit/">Программирование</a> </li>
<li><a href="http://www.cz268.com.cn/Webbiz/Seo/">Оптимизация</a> </li>
<li><a href="http://www.cz268.com.cn/Webbiz/Pormot/">Продвижение</a> </li>
<li><a href="http://www.cz268.com.cn/Webbiz/Blog/">Блог</a> </li>
<li><a href="http://www.cz268.com.cn/Design/w3c/">ВЕБ-стандарт</a> </li>
<li><a href="http://www.cz268.com.cn/Webmaster/RecSite/">Классный сайт</a> </li>
<li><a href="http://www.cz268.com.cn/Webbiz/Exp/">Опыт</a> </li>
<li><a href="http://www.cz268.com.cn/Webbiz/Free/">Ресурсы</a> </li>
<li><a href="http://www.cz268.com.cn/Webmaster/Reading/">Обязательно прочтите</a> </li>
<li><a href="http://www.cz268.com.cn/Server/">Сервер</a> </li>
<li><a href="http://www.cz268.com.cn/cms/">Создание веб-сайта с помощью CMS</a> </li>
</ul></div>
<div class="nav_title">
<div id="n2">Сеть для веб-мастеров, связанная с отраслью</div>
</div>
<div class="nav_list">
<ул>
<li><a href="http://www.cz268.com.cn/article/p1/14.html">Промышленность</a> </li>
<li><a href="http://www.cz268.com.cn/article/p1/15.html">Финансирование</a> </li>
<li><a href="http://www.cz268.com.cn/article/p1/16.html">Портал</a> </li>
<li><a href="http://www.cz268.com.cn/article/p1/17.html">Поиск</a> </li>
<li><a href="http://www.cz268.com.cn/article/p1/19.html">Бизнес</a> </li>
<li><a href="http://www.cz268.com.cn/article/p1/18.html">Разработка</a> </li></ul></div>
<div class="nav_title">
<div id="n3">Информация о Сетевом альянсе веб-мастеров</div>
</div>
<div class="nav_list">
<ул>
<li><a href="http://www.cz268.com.cn/Union/News/">Союз</a> </li>
<li><a href="http://www.cz268.com.cn/Union/Intro/">Введение</a> </li>
<li><a href="http://www.cz268.com.cn/Union/Comment/">Комментарии</a> </li>
<li><a href="http://www.cz268.com.cn/Union/Skill/">Навыки</a> </li>
<li><a href="http://www.cz268.com.cn/Union/">Обсуждение профсоюза</a> </li></ul></div>
<div class="nav_title">
<div id="n4">Общие инструменты сети веб-мастеров</div></div>
<div class="nav_list">
<ул>
<li><a href="http://www.cz268.com.cn/Tool/Alexa/">Alexa</a> </li>
<li><a href="http://www.cz268.com.cn/Tool/IP/">IP</a> </li>
<li><a href="http://www.cz268.com.cn/Tool/Whois/">WHOIS</a> </li>
<li><a href="http://www.cz268.com.cn/Tool/PR/">PR</a> </li>
<li><a href="http://www.cz268.com.cn/Tool/Meta/">МЯСО</a> </li>
<li><a href="http://www.cz268.com.cn/Tool/Key/">Ключевые слова</a></li></ul></div></div>
<div class="ad_300x250">
<script type="text/javascript">
</скрипт>
<script type="text/javascript"
src="http://pagead2.googlesyndiction.com/pagead/show_ads.js">
</скрипт>
</div>

<div class="mba_title">『Популярные статьи』
<span>Сеть 268 для веб-мастеров</span></div>

<ул>

<li><a title="Особенности по установке и настройке 64-разрядного веб-сервера" href="/Server/Web/4137C923K9KAH60B5CIK6.html" rel="external">Особенности по установке и настройке 64-разрядного веб-сервера..</a >< /ли>
<li><a title="Сюй Цзинлэй: Веб-мастера, вы понимаете шумиху?" href="/News/IT/192134JB90KE4B655BH2AJ0.html" rel="external">Сюй Цзинлэй: Веб-мастера, вы понимаете шумиху? ..</a></li>
<li><a title="Руководство по зарабатыванию денег, подав заявку на участие в Google AdSense" href="/Union/Skill/9164326D9ECBA8J5BI0D99.html" rel="external">Руководство по зарабатыванию денег, подав заявку на участие в Google AdSense..</a ></li>
<li><a title="Маркетинг блогов означает, что вас нелегко полюбить" href="/Webbiz/Blog/412787AJ1IA91239A1F8D.html" rel="external">Маркетинг блогов означает, что это непросто любить тебя..</a >/li>
<li><a title="Влияние веб-сайтов, соответствующих стандарту XHTML DIV+CSS, на SEO" href="/Webbiz/Exp/18299H53K4407DDK1K6JA.html" rel="external">Влияние веб-сайтов, соответствующих стандарту XHTML стандартный макет XHTML DIV+CSS SE..</a></li>
<li><a title="Как мы пишем мягкие статьи, чтобы обмануть и увеличить количество кликов!" количество кликов увеличить!..</a></li>
<li><a title="Примечание: вы имеете право использовать только доменное имя Xinwang Internet!" href="/News/IT/3101584H84FGI21K0F4HI2.html" rel="external">Примечание: имеете только право использовать доменное имя Xinwang Internet. Право на использование.</a></li>
<li><a title="Подача документов внутри страны сложна, базовый здравый смысл в отношении передачи зарубежного пространства" href="/News/IT/27151C4C6HF6G1540EE67E.html" rel="external">Подача заявок внутри страны сложна, основные принципы передачи документов за границу космос..</a></li>
<li><a title="Создайте локальный сайт-портал с комплексными стратегиями и супероптимизацией SEO, чтобы предоставить вам всесторонний анализ" href="/Webbiz/Seo/7335242704F1BI101D8FI.html" rel="external">Создайте локальный сайт-портал с комплексными стратегиями и супероптимизацией SEO.</a></li>
<li><a title="Десять вопросов и ответов по классическим темам помогут вам повысить скорость онлайн-транзакций" href="/Webmaster/Reading/232917D5H6JID4CH06IG6.html" rel="external">Десять вопросов и ответов по классическим темам помочь вам улучшить ваши онлайн-продажи.</a></li>
</ul>
</div>

<div class="ad_125x125">
<script type="text/javascript">
</скрипт>
<script type="text/javascript" src="http://pagead2.googlesyndiction.com/pagead/show_ads.js">
</скрипт>

<script type="text/javascript">
</скрипт>
<script type="text/javascript" src="http://pagead2.googlesyndiction.com/pagead/show_ads.js">
</скрипт>
</div>
<div class="bordersideart">
<div class="border_titlesideart_title">『<a
href="http://www.cz268.com.cn/cms/">Школа CMS для веб-мастеров</a>』Сеть 268 для веб-мастеров</div>

<ул>

<li><a title="Пусть Fengxun отображает коды всех системных шрифтов" href="/cms/foosun/13225022H3IGA159AD9B2KK.html" rel="external">Позволь Fengxun отображать коды всех системных шрифтов..</a ></li>
<li><a title="Добавьте знаковый текст или изображения для рекомендуемых новостей и горячих новостей" href="/cms/foosun/132248778HC517G03K5I4BC.html" rel="external"><font color="#CC0000"> Добавьте идентифицирующий текст или </font>..</a></li> для просмотра рекомендуемых новостей и горячих новостей.
<li><a title="Изображения и номера могут быть выбраны для автоматического отображения списка в порядке 1, 2 и 3" href="/cms/foosun/132244870DIA50I5JA5I304.html" rel="external">Изображения и номера могут быть автоматически отображается Работа в порядке списка 1, 2, 3..</a></li>
<li><a title="Foosun 4.0 реализует функцию щелчка мыши NetEase" href="/cms/foosun/13224377846G00GHAHKFDA6.html" rel="external">Foosun 4.0 реализует функцию щелчка мыши NetEase..</a></li>
<li><a title="Fengxun sp2 запускает специальный инструмент форума" href="/cms/foosun/13224299B01I2DC9CIK4AE6.html" rel="external">Fengxun sp2 запускает специальный инструмент форума..</a>< /li>
<li><a title="Fengxun FS4.0 добавляет функцию предотвращения горячих ссылок на изображения" href="/cms/foosun/1322413718G1DAA95JG2JI4.html" rel="external"><font color="#CC0000">Fengxun FS4. функция защиты хотлинков изображений</font>..</a></li>
<li><a title="Как создать две колонки списка новостей с помощью Fengxun DIV+CSS" href="/cms/foosun/13224036HKICIB1BE9K64G5.html" rel="external">Fengxun DIV+CSS, чтобы создать две колонки новостей Как разделить список на столбцы.</a></li>
<li><a title="Предоставить 6 наборов шаблонов журналов участников системы Fengxun 4.0" href="/cms/foosun/13223694732D9E863FH8C82.html" rel="external">Предоставить 6 наборов шаблонов журналов участников системы Fengxun 4.0..< /а></ли>
<li><a title="Fengxun «Картинка в картинке» реализует метод вызова рекламы Google» href="/cms/foosun/132234842AJAI5GD75C140K.html» rel="external">Fengxun «Картинка в картинке» реализует метод вызов объявлений Google .</a></li>
<li><a title="Добавить функцию голосовой подсказки «У вас есть новое текстовое сообщение, пожалуйста, обратите внимание на проверку» для системы членства" href="/cms/foosun/132233141FHK3C9HA1GC34K.html" rel="external">Добавить " У вас есть новые текстовые сообщения, проверьте их.</a></li>
</ul>
</div>

</div></div>
<DIV class="borderlinks"><SPAN>Дружественные ссылки</SPAN>
<DIV class="border_contentlinks_content"> <table width="100%" border="0" cellpacing="1" cellpadding="3">
<тр>
<td width="10%" align="center" valign="meddle"><a href="http://www.qkeer.com" target="_blank">QKeer.com</a></td >
<td width="10%" align="center" valign="meddle"><a href="http://www.ip180.com" target="_blank">частые запросы IP180</a></td >
<td width="10%" align="center" valign="meddle"><a href="http://www.jc286.com" target="_blank">Сеть учебных пособий jc286</a></td >
<td width="10%" align="center" valign="meddle"><a href="http://www.21seo.cn" target="_blank">Группа SEO-оптимизаторов</a></td >
<td width="10%" align="center" valign="meddle"><a href="http://www.51w3c.com" target="_blank">Ассоциация веб-стандартов</a></td >
<td width="10%" align="center" valign="meddle"><a href="http://www.cz268.com.cn" target="_blank">Сеть для веб-мастеров 268</a> < /тд>

</tr>
</таблица></DIV>
</DIV>
<div class="footer"><a href="http://www.cz268.com.cn/">268 Домашняя страница сети веб-мастеров</a> | <a href="http://www.cz268. com.cn/Webbiz">Работа веб-сайта</a> | <a href="http://www.cz268.com.cn/News">Новости отрасли</a> | <a href="http:// www.cz268.com.cn/Union">Информация о Союзе</a> | <a href="http://www.cz268.com.cn/Design">Академия веб-мастеров</a> | <a href= " http://www.cz268.com.cn/Webmaster">Онлайн для веб-мастеров</a> | <a href="http://www.cz268.com.cn/tool">Инструменты для веб-мастеров</a> > | <a href="http://www.cz268.com.cn/cms">Зона CMS</a> | <a href="http://www.cz268.com.cn/Server">Район серверов< /a>| <a href="http://www.cz268.com.cn/sitemap">Карта сайта</a><br />
<а
href="http://www.cz268.com.cn/">www.cz268.com.cn</a> © 2006-2008. Все права защищены. 268 Webmaster Network <img
id="copyright" src="/templets/files/ico_bg.gif" /><a href="http://www.miibeian.gov.cn/"
rel="external">Регистрация ICP в Пекине</a> Создано QQ469502097
<script src='http://s116.cnzz.com/stat.php?id=470833&web_id=470833' Language='JavaScript' charset='gb2312'></script><br />Информация на этом сайте поступает из Интернета_ Это только для справки и не может быть использовано в качестве достоверной основы. Если при перепечатке или цитировании статей на этом сайте возникают проблемы с авторскими правами, свяжитесь с нами как можно скорее.</div>
<noscript><iframe src="*.html"></iframe></noscript>
</body></html>