Делаем иконкам эффект затухания на JQuery
29 октября 2010 года, Размещено в категории: jQuery / MooTools
Делаем замечательный эффект затухания социальным иконкам с помощью JQuery.
Для примера были взяты иконки социалок, весь принцип данного эффекта в том, что когда мы приводим мышкой на одну из иконок другие затухают, понятнее будет Вам когда за ценить демо.
Шаг 1 JavaScript:
Подключаем фреймворк JQuery и наш js код который находится в файле script.js между тэгом <head></head>
1 2 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="js/script.js"></script> |
Шаг 2 HTML:
HTML код у нас очень простой, между тэгом <strong> вписываем лозунг который будет появляться при наведении курсора на иконку.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <div id="wrapper"> <ul class="social" id="jquery"> <li class="delicious"> <a href="#"><strong>Delicious</strong></a> </li> <li class="digg"> <a href="#"><strong>Digg</strong></a> </li> <li class="facebook"> <a href="#"><strong>Facebook</strong></a> </li> <li class="flickr"> <a href="#"><strong>Flickr</strong></a> </li> <li class="linkedin"> <a href="#"><strong>LinkedIn</strong></a> </li> <li class="reddit"> <a href="#"><strong>Reddit</strong></a> </li> <li class="rss"> <a href="#"><strong>RSS</strong></a> </li> <li class="twitter"> <a href="#"><strong>Twitter</strong></a> </li> </ul> </div> |
Шаг 3 CSS:
Иконки мы подключаем через CSS (обращайте внимание на пути иконок)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | #wrapper { width:800px; margin:40px auto; } .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.delicious { background-image:url("../images/delicious.png"); } li.digg { background-image:url("../images/digg.png"); } li.facebook { background-image:url("../images/facebook.png"); } li.flickr { background-image:url("../images/flickr.png"); } li.linkedin { background-image:url("../images/linkedin.png"); } li.reddit { background-image:url("../images/reddit.png"); } li.rss { background-image:url("../images/rss.png"); } li.twitter { background-image:url("../images/twitter.png"); } |
Но есть маленький минус в IE эффект всплывающих подписей не работает так как используются несколько функций CSS3, но это поправимо подключив PIE (Progressive Internet Explorer) - Учим Internet Explorer понимать CSS3.
Кстати автором данного эффекта является
10 лет назад
Как мило смотрится на примере.
Благодарю за урок. Пригодится на блоге. 🙂
10 лет назад
Спасибо за решение, буду пользоваться.только немного пугает массивность JQuery 😉
10 лет назад
vallmind:
Если хоть чучуть понимать JQuery код, то уже и не такой от и страшный 🙂
10 лет назад
наврядле применимо..