Чтение RSS
По вопросам сотрудничества и рекламы на портале MixliP, обращаться на почту admin@turklib.ru
MixliP - Территория вебмастера! На нашем сайте вы найдете все для веб-мастеров и не только =) ! Различные скрипты для вашего сайта. И еще на нашем сайте немало софта! Заходи не пожалеешь!

ОТОБРАЖЕНИЕ СОЦИАЛЬНЫХ ИКОНОК

ОТОБРАЖЕНИЕ СОЦИАЛЬНЫХ ИКОНОК

При наведении пользователя на иконку происходит затухание остальных. Эффект можно реализовать либо только на CSS3, либо на jQuery.
Подключаем в шапке файлы:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

ОТОБРАЖЕНИЕ СОЦИАЛЬНЫХ ИКОНОК

на CSS3
<ul class="social" id="css3">
    <li class="rss">
        <a href="http://*****"><strong>RSS</strong></a>
    </li>
</ul>

на jQuery
<ul class="social" id="jquery">
    <li class="rss">
        <a href="http://*****"><strong>RSS</strong></a>
    </li>
</ul>




ОТОБРАЖЕНИЕ СОЦИАЛЬНЫХ ИКОНОК

.social { list-style:none; margin:30px auto; width:464px; }
.social li { display:inline; float:left; background-repeat:no-repeat; }
.social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999;
 text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);
 -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

li.rss { background-image:url("../images/rss.png"); }

дополнительные стили для CSS3
#css3:hover li { opacity:0.2; }

#css3 li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;
 -moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#css3 li a strong { opacity:0;
 -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms;
 -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }

#css3 li:hover { opacity:1; }
#css3 li:hover a strong { opacity:1; top:-10px; }

ОТОБРАЖЕНИЕ СОЦИАЛЬНЫХ ИКОНОК

только для jQuery:
$(document).ready(function()
{
    // стереть все подсказки
    $("#jquery li").each(function() {
        $("a strong", this).css("opacity", "0");
    });
    
    $("#jquery li").hover(function() { // Mouse over
        $(this)
            .stop().fadeTo(500, 1)
            .siblings().stop().fadeTo(500, 0.2);
            
        $("a strong", this)
            .stop()
            .animate({
                opacity: 1,
                top: "-10px"
            }, 300);
        
    }, function() { // Mouse out
        $(this)
            .stop().fadeTo(500, 1)
            .siblings().stop().fadeTo(500, 1);
            
        $("a strong", this)
            .stop()
            .animate({
                opacity: 0,
                top: "-1px"
            }, 300);
    });
    
});

Просмотры: 2201 Комментарии (0)
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.


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


Сайт MixliP.ru представляет собой набор новостей и ссылок на внешние общедоступные источники в сети Интернет, не подконтрольные администрации сайта MixliP.ru, а, следовательно, не несет никакой ответственности за их содержание.


Вся информация о программном обеспечении и скриптах, размещенная на данном сайте, предоставлена исключительно в ознакомительных целях и только для просмотра, и призвана помочь посетителям сайта MixliP.ru выбрать для себя и в последствии приобрести соответствующие лицензионные авторские программные продукты.


Читать полностью информацию правообладателям.




Наши друзья

Полезное

Разделы сайта

 Пользователи онлайн

  • Всего на сайте: 2
    Пользователей: 0
    Гостей: 2
    Роботов: 0