Уважаемые пользователи skript-na-ucoz.ucoz.ru. Вы найдете у нас на портале - и сможете скачать бесплатно различные программы для вебмастеров и не только, фильмы, игры, все для фотошопа, скрипты для ваших сайтов, бесплатные шаблоны, модули, хаки и релизы популярных CMS таких-как: Datalife Engine, WordPress, Joomla, Drupal, Ucoz и многое другое, а также обсудить и получить помощь на нашем форуме. С Уважением Администрация skript-na-ucoz
  • Страница 1 из 1
  • 1
Новостной блок своими руками
Kenik
Дата: Пятница, 26.02.2010, 17:31 | Сообщение # 1
Администратор
Сообщений:
2300
Замечания:
0
Offline
В этом уроке мы с Вами будем учиться делать блок с прокручивающимися в нем новостями. Вот как он выглядит:
Блок новостей
Итак, по шагам.
Шаг 1.
Создайте основу навигации в таком формате:
Code
<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>

Если у Вас будет больше пунктов в новостях, то просто добавляйте их в новые контейнеры

Code
<li></li>
. Поместите этот код в то место страницы, где Вы хотели бы видеть свой навигационный блок.
Шаг 2.
После основного кода, вставьте следующий скрипт:
Code
<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.
После этого скрипта или перед закрывающимся тэгом

Code
</body>
поместите скрипт из этого файла
На этом процесс закончен, проверяйте результат во всех браузерах, всё должно работать как надо.
Если вдруг блок будет отображаться, а новости не побегут, то скачайте фаил с образцом исходного кода и попробуйте вставить код из него вместо своего.


  • Страница 1 из 1
  • 1
Поиск: