Главная Форум Поиск Чат
[Новые сообщения | Участники форума | Правила Сайта | Поиск | RSS 2.0 ]
Правила сайта
На сайте появились правила обязательно прочтите их Правила Сайта
  • Страница 1 из 1
  • 1
Форум » uCoz » Новости сайта » Новостной слайдер на jQ
Новостной слайдер на jQ
1001informerДата: Пятница, 10.04.2009, 09:20 | Сообщение # 1
Администратор
Группа: Администраторы
Сообщений: 188
Награды: 3

Подключаем на нужную страницу JQwerty

Code
<script src="http://csrulz.ru/scripts/jquery-1.2.2.pack.js"></script>

Создаем глобальный блок SLIDER, пихаем туда следующий код.

Code
<style type="text/css">    
#wrap {width: 250px;height: 380px;padding:10px;background-image: url(http://iucoz.ru/other/silder/pattern.png);}    
* html #wrap {width: 270px;height: 380px;padding:10px;background-image: url(http://iucoz.ru/other/silder/pattern.png);}    
#flow {overflow: hidden;height:380;width:220;}    
#pult {float:right; width:25px;height:380px;background-color:#ebebeb;}    
#b {margin-top:330px;}    
.contblock {font-family: Verdana; font-size:11px; color:#666666; border-bottom: 1px dotted #999999; padding:4px;text-align:justify;}    
.postdate {color: #0066CC;font-weight: bold;}    
#up {filter: alpha(opacity=30); opacity: 0.30;}    
#down {filter: alpha(opacity=30); opacity: 0.30;}    
</style>    
<div id="wrap"><div id="pult">    
      <div id="t"><img src="http://iucoz.ru/other/silder/arrow_up.png" width="25" height="25" id="down"></div>    
      <div id="b"><img src="http://iucoz.ru/other/silder/arrow_dw.png" width="25" height="25" id="up"></div>    
</div><div id="flow"><div id="cont">$MYINF_X$
</div></div>    
</div>    

<script type="text/javascript">    
var j = jQuery.noConflict();    

var cheight = j("#cont").height();    
var wheight = j("#wrap").height();    
var maxmarging = parseInt(cheight)-parseInt(wheight);    

j("#up").hover(    
function() {    
j("#cont").animate({marginTop: "-" + maxmarging + "", marginBottom: "0"}, 5000);    
j("#up").animate({opacity: 1}, 70);    
},    
function() {    
j("#cont").stop();    
j("#up").animate({opacity: 0.3}, 70);    
});    
           
j("#down").hover(    
function() {    
j("#cont").animate({marginBottom: "-" + maxmarging + "", marginTop: "0"}, 5000);    
j("#down").animate({opacity: 1}, 70);    
},    
function() {    
j("#cont").stop();    
j("#down").animate({opacity: 0.3}, 70);    
});    

</script>

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

Code
<div class="contblock"><span class="postdate">$DATE$</span><br>$MESSAGE$</div>

Ставим $GLOBAL_SLIDER$ в то место, где вам нужен слайдер. Готово.


 
Форум » uCoz » Новости сайта » Новостной слайдер на jQ
  • Страница 1 из 1
  • 1
Поиск:
Статистика Форума
Последние темы Читаемые темы Лучшие пользователи Новые пользователи

Украшаем проверку сложности пароля

(6)

Всплывающая табличка с инфой о Л.С

(2)

Играем в города

(1)

Сборка всё для Форума

(3)

Как ускорить индексацию сайта - 18 эффективных способов

(1)

Профиль в правом нижнем углу для ucoz

(0)

Форма поиска по сайту ucoz

(0)

Форма поиска по сайту ucoz

(0)

Кнопка вверх и вниз для сайта

(0)

Вид статистика для ucoz

(0)

Украшаем проверку сло...

(6)

Играем в слова

(5)

Сколько вы бы дали за...

(4)

Страница "Доступ...

(3)

Досчитай до ХХХ пока ...

(3)

Шпаргалка по CSS фору...

(3)

Скрипт Мои подарки !!...

(3)

Сборка всё для Форума

(3)

Кнопка инфо

(3)

Всплывающая табличка ...

(2)

  • Fenik$
  • lox
  • 1001informer
  • DevontaeDuclos-decelles
  • veverka
  • AlexKlose
  • Тестовый(бот)
  • djmax
  • ambal
  • DINO_MC47
  • SvetOK
  • ClaudioAvany
  • GrandPhila
  • Lilliehoase
  • KarinaAza13rhilm
  • Davidmap
  • Roxohzx
  • CindyVO
  • DavidKes
  • BrianNox