• Страница 1 из 1
  • 1
Информеры от up-rise с эффектами при наведении
Дмитрий Дата: Среда, 18.04.2012, 19:16 | Сообщение # 1 | Сообщить о нерабочей теме


Аватар для Дмитрий


Покажу пример на каталоге файлов :
Создаем информер : [ Каталог файлов · Материалы · В случайном порядке · Материалы: 4 · Колонки: 4 · Длина заголовка: 25 ]
Вписываем в него код :
Код
<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://gigabytes.clan.su/load-ucoz/skripts/inform-statist/1/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=""><font color="#00BFFF">$TITLE$</font></a></div>  
<div class="opis">
<center><img src="$IMG_URL1$" alt="$TITLE$" width="200" height="50"/></center><br>
Раздел : <a href="/load/">Каталог файлов</a><br>
Категория : <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a><br>
Дата : $DATE$<br>
Скачали : $LOADS$ раз<br>
Комментариев : $COMMENTS_NUM$<br>
</div>  
<div class="entry"><a href="$ENTRY_URL$">Перейти к материалу</a></div>  
</div></div>

В ту страницу где будет стоять информер
Код
<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>     
$MYINF_НОМЕР_ВАШЕГО_ИНФОРМЕРА$    


Информер редактируем под себя!
Автор : Up-Ri
se
Прикрепления: 9674749.png (306.1 Kb)


From Russia With Love!

Сообщение отредактировал Дмитрий - Суббота, 26.10.2013, 22:44
  • Страница 1 из 1
  • 1
Поиск: