Красивое портфолио или топовые новости

Стильное решение для создания портфолио, горячих новостей, топовых фотографии и реализации других задач.

Хочу поделиться с Вами красивым решением для создания портфолио, горячих новостей, топовых фотографии и т.п. Решение базируется на основе jQuery и easingPlugin. Для начала пример того, как это выглядит и работает (поводите курсором по изображениям).

Чтобы его подключить, нужно добавить код в страницу:сайт источник http://yapro.ru Sat Mar 06 2010 12:43:50 GMT+0300

<script language="Javascript" type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easing.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Теперь немного о том, как это работает.
Всё удобно представлено в виде:

<ul><li><a><img alt="Изображение наезжающее сверху"><img alt="Изображение основное"></a></li>...</ul>

Ширина конструкции прописывается в классе portfolio

.portfolio { width:1004px; }

Высота конструкции зависит от высоты изображений и количества получившихся ячеек (блоков).
Чтобы изменить ширину или высоту блоков, нужно поправить их следующим образом:

.portfolio li { width:250px; height:200px }
.portfolio li a { width:250px; height:200px; }

Думаю, каждый сможет переделать данный простой и удобный скрипт под свои нужды, дерзайте.

Ссылки: пример в отдельном окне» | скачать архив примера»

Оцени публикацию:
  • 4,16
Оценили человек: 4

Похожие статьи:

Справочники и учебники:


Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

Новые заметки:

Про что мы забываем когда делаем оценку задачи по времени

Список вопросов для собеседования разработчика по телефону

Symfony2 авторизация без Doctrine2 для чайника

Phpstorm7 LiveEdit

Жесткий хабр или не хабр, тогда кто?

Яндекс.Деньги мошенничество

Как узнать какие страницы в поиске яндекса или это секрет

Последние комменты:

Yapro CMS:

Здравствуйте, Гость | Войти | Регистрация | Карта сайта | RSS ленты | Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2018 YaPro.Ru

Главная » Веб-мастеру » JavaScript »