Новостной блок своими руками

В этом уроке мы с Вами будем учиться делать блок с прокручивающимися в нем новостями. Вот как он выглядит:

Итак, по шагам.

Шаг 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> поместите скрипт из этого файла:

Скачать фаил со скриптом для 3-го шага

На этом процесс закончен, проверяйте результат во всех браузерах, всё должно работать как надо.

Если вдруг блок будет отображаться, а новости не побегут, то скачайте фаил с образцом исходного кода и попробуйте вставить код из него вместо своего.