В этом уроке мы с Вами будем учиться делать блок с прокручивающимися в нем новостями. Вот как он выглядит:
Блок новостей
Итак, по шагам.
Шаг 1.
Создайте основу навигации в таком формате:
<div>
<div>
<div id="vscroll0" style="display:none;z-index:0;">
<ul>
<li delay=2>3/14/08 - <a href="sample_link.html">Наша компания открыла новый офис в Уфе. Он находится на ул. Шашина 5.</a><br><br></li>
<li delay=2>3/15/08 - <a href="sample_link.html">Наша компания стала победителем выставки ЭкспоКрай! Мы лучшие!</a><br><br></li>
<li delay=2>3/16/08 - <a href="sample_link.html">Наша компания представила новый образец робота Willi 6ex.</a><br><br></li>
<li delay=2>3/18/08 - <a href="sample_link.html">В ближайшие дни планируется промоакция по продаже дешевых роботов!</a><br><br></li>
<li delay=2>3/19/08 - <a href="sample_link.html">Новые возможности для частных инвесторов! Небывалые процентные ставки!.</a><br><br></li>
</ul>
</div>
</div>
</div>
Если у Вас будет больше пунктов в новостях, то просто добавляйте их в новые контейнеры <li></li>. Поместите этот код в то место страницы, где Вы хотели бы видеть свой навигационный блок.
Шаг 2.
После основного кода, вставьте следующий скрипт:
<script language="JavaScript">
function vscroll_data0()
{
this.enable_visual_design_mode = false;
this.container_width = 160
this.container_height = 190
this.top_pause_offset = 10
this.initial_scroll_delay = 0
this.animation_delay = 20
this.animation_jump = 2
this.animation_delay_mac = 100
this.animation_jump_mac = 10
this.container_styles = "background-color:#f5f5f5; background-image:; border-style:solid; border-color:#000000; border-width:1px; padding-right:10px; padding-left:10px; "
this.item_link_styles = "margin-bottom:0px; background-color:; background-image:; color:#1e51c8; text-align:; font-family:Arial; font-size:13px; font-weight:; text-decoration:none; border-style:none; border-color:; border-width:0px; padding-top:; padding-right:; padding-bottom:; padding-left:; "
this.item_link_hover_styles = "background-color:; background-image:; color:; text-align:; font-family:Arial; font-size:; font-weight:; text-decoration:underline; "
this.item_styles = "margin-bottom:15px; background-color:; background-image:; color:#212e43; text-align:; font-family:Arial; font-size:13px; font-weight:; text-decoration:none;"}
</script>
Здесь Вы можете эксперементировать со значениями и стилями, добиваясь того внешнего вида, который Вам нужен.
Шаг 3.
После этого скрипта или перед закрывающимся тэгом </body> поместите скрипт из этого файла
На этом процесс закончен, проверяйте результат во всех браузерах, всё должно работать как надо.
Если вдруг блок будет отображаться, а новости не побегут, то скачайте фаил с образцом исходного кода и попробуйте вставить код из него вместо своего. Источник: ruseller.com
