[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Информеры от Up-Rise.Ru с эффектами при наведении
Дата: Четверг, 24.02.2011, 18:51 | Сообщение # 1
Администратор
    Сообщений:
    841
    Награды:
    2
ДЕМО

Покажу пример на каталоге файлов :

Создаем информер : [ Каталог файлов · Материалы · В случайном порядке · Материалы: 4 · Колонки: 4 · Длина заголовка: 25 ]

Вписываем в него код :

Code
<script type="text/javascript">   
     
$(document).ready(function () {
     
   var colour = $("#overlay$ID$");
   var content = $("#hover$ID$");
     
   content.hide();
   colour.hide();   
     
   $("#container$ID$").hover(function() {
   content.stop().show().css({ "left" : "-450px" }).animate({left : 0}, 290);
   colour.stop().fadeTo(500, .7)
   }
   ,function() {
   content.stop().animate({left : 450}, 290);
   colour.stop().fadeTo(500, 0)
   });
});
     
</script>   
<script type="text/javascript" src="http://up-rise.ru/Downloads/Scripts/infeff/jquery.min.js"></script>   
<style>
#container$ID$ {height:155px;width:300px;-moz-background-size:100% 100%;-webkit-background-size:100% 100%;-o-background-size:100% 100%;-khtml-background-size:100% 100%;background-size:100% 100%;position:relative;overflow:hidden;z-index:0;padding:0;margin:0 auto;background-image:url($AUTHOR_EMAIL$);border:1px solid #414141;}
#container$ID$:hover {border-color:#303030;}
#overlay$ID$ {background-color:#000;display:block;position:absolute;top:0;left:0;width:300px;height:155px;}
#hover$ID$ {color:#fff;width:300px;display:block;height:155px;position:absolute;padding:10px;}
</style>   
<div id="container$ID$"><div id="overlay$ID$"></div><div id="hover$ID$">   
<div class="nazv"><a href=""><b><font color="#00BFFF">$TITLE$</font></b></a></div>
<div class="opis">
<b>Раздел :</b> <a href="/load/">Каталог файлов</a><br>
<b>Категория :</b> <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a><br>
<b>Дата :</b> $DATE$<br>
<b>Скачали :</b> $LOADS$ раз<br>
<b>Комментариев :</b> $COMMENTS_NUM$
</div>
<div class="entry"><b><a href="$ENTRY_URL$">Перейти к материалу</b></a></div>
</div></div>

В ту страницу где будет стоять информер

Code
<style>
.nazv {color:#1C86EE;font-size: 16px;text-align: center;padding:0 0 10 0;text-shadow:1px 1px 1px #333;}
.opis {color:#dedede;font-size: 13px;text-align: left;}
.entry {color:#00ff3w;font-size: 15px;text-align: right;padding:10 15 0 0;}
</style>

Настройки берутся в основном с Вашего CSS так что если что смотрите =)

Я так по мелочи сделал отдельные для дизайна !

Автор : NeoGame

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