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

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

Хочу поделиться с Вами красивым решением для создания портфолио, горячих новостей, топовых фотографии и т.п. Решение базируется на основе 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:
Введите изображенные цифры:
Captcha

HTML (19)

CSS (36)

PHP (21)

MySQL (14)

JavaScript (57)

Flash (6)

XML (3)

Apache (34)

Дизайн (35)

Продвижение (31)

Программы (26)

Unix (11)

Интересное (37)


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


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

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

Защита сервера от ошибок в phpMyAdmin

HTML5 - новые виды атак

Социальные рекомендации Twitter в Google

Ашманов про стартапы

Skype Distributed Database Architecture

Erlang - лекарство при высоких нагрузках

Amazon Web Services: инструменты обеспечения масштабируемости и отказоустойчивости

Обсуждения на форуме:

некорректно отображается страница в браузерах

не могу войти в admin

Нужна критика идеи

Поиск по дополнительным полям и формам

Вопрос по категориям

Несколько вопросов по проекту.

Плагины, меню и интеграция

Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter| Здравствуйте, Гость | Войти | Регистрация| Карта сайта | RSS ленты
О проекте | Скачать CMS | Видеоуроки | Документация | Плагины | Форум | Идеи | Новости | Веб-мастеру | Контакты

YaPro CMS в Живом Журнале

YaPro CMS в Твитере

YaPro CMS в Одноклассниках

YaPro CMS в Яндекс.Блогах


youtube.com/watch?v=7hFivbgIEqk

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


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