Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

Jquery → Mobily Blocks

Mobily Blocks

Mobily Blocks это универсальный JQuery плагин, размер этого плагина просто улыбает (2 КБ), который позволяет вам создать неупорядоченный список, как анимированный круг. С его помощью вы можете выстроить в круг кнопочки добавить в закладки например или же просто изображения. Взгляните на демо, я уверен вам понравиться данный эффект.

Демо: смотреть
Скачать: mobilyblocks.zip [244,33 Kb] (cкачиваний: 424)



Мы реализуем 2 эффекта, первый эффект будет воспроизводиться по нажатии на кнопку, а второй по наведению мышки.

Список изменений:
25.1.2011 - исправления ошибка события при наведения, добавил вариант направлений(по часовой стрелке или против часовой стрелки)
8.1.2011 - добавил наведении триггера
13.12.2010 - исправления ошибки для события нажатия

И так начнем.

Сначало подключаем css и js файлы, между тегами head:
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/mobilyblocks.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>


HTML:
Разметка тоже просто, просто обычный список.
<div id="content">
        <div class="socials">
            <ul class="reset">
                <li><a href="#"><img src="img/socials/delicious.png" alt="" /></a></li>
                <li><a href="#"><img src="img/socials/digg.png" alt="" /></a></li>
                <li><a href="#"><img src="img/socials/google.png" alt="" /></a></li>
                <li><a href="#"><img src="img/socials/stumbleupon.png" alt="" /></a></li>
                <li><a href="#"><img src="img/socials/technorati.png" alt="" /></a></li>
                <li><a href="#"><img src="img/socials/twitter.png" alt="" /></a></li>
            </ul>            
        </div>    
        
        <div class="nature">
            <ul class="reset">
                <li><a href="#"><img src="img/nature/img2.png" alt="" /></a></li>
                <li><a href="#"><img src="img/nature/img3.png" alt="" /></a></li>
                <li><a href="#"><img src="img/nature/img4.png" alt="" /></a></li>
                <li><a href="#"><img src="img/nature/img5.png" alt="" /></a></li>
                <li><a href="#"><img src="img/nature/img6.png" alt="" /></a></li>
                <li><a href="#"><img src="img/nature/img2.png" alt="" /></a></li>
                <li><a href="#"><img src="img/nature/img3.png" alt="" /></a></li>
            </ul>            
        </div>    
    </div>


CSS:
Стили тоже минимальны.
.blocks {
    display:block;
    width:;
    height:; /* you need to specify width and height values */
    position:relative;
    cursor:pointer;
}
  
ul.reset,
ul.reset li {
    display:block;
    list-style:none;
    padding:0;
    margin:0;
}
  
ul.reset li {
    position:absolute;
}


Демо: смотреть
Скачать: mobilyblocks.zip [244,33 Kb] (cкачиваний: 424)



Mobily Blocks
Опубликовал dimas_ua, 16-05-2011, 00:00 Комментариев: 1
 (голосов: 13)
Пишет Nilallador, 10 июля 2011 23:16
  • Сообщений: 0
  • Новостей: 0
Прикольно :) Можно сказать, это взорвало мой мозг! :)