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

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

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

Шаг 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-го шага

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

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.opencube.com
Перевел: Евгений Попов
Урок создан: 22 Сентября 2008
Просмотров: 66588
Правила перепечатки


5 последних уроков рубрики "Для сайта"

  • Эффекты блочного раскрытия

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

  • 15 полезных .htaccess сниппета для сайта на WordPress

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

  • 20 бесплатных тем для WordPress в стиле Material Design

    Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

  • 20 сайтов с креативным MouseOver эффектом

    Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.

  • 45+ бесплатных материалов для веб дизайнеров за август 2016

    Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.

^ Наверх ^