Хаки и Скрипты Next Generation CMS

Простой плагин JQuery Covering-Bad

irbees2008 irbees2008 Опубликовано - 2 - ноября Изображения
2568 - 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css hmlt
  • Демо:

Этот плагин использует перекрытие одного изображения другим с помощью ползунка
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. , распаковываем и заливаем в папку с шаблоном.
2.подключаем в хеад

Код:
<link href="{tpl_url}/css/coveringBad.css" type="text/css"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css"/>
<script src="{tpl_url}/js/coveringBad.js" ></script>
3.Подключаем туда где хотим видеть наш эффект
Код:
<div class="covered">
<div class="handle"></div>
<div class="changeable"></div>
</div>
4.Иницилиазируем наш наш блок
Код:
<script type="text/javascript">$(function() {
$('.covered').coveringBad();
});</script>
5.Настройки скрипта
Код:
 marginY : 20,   // Handle's distance from top and bottom
marginX : 20, // Handle's distance from left and right
setX : 30, // Defulat location for handle from left
setY : 150, // Defulat location for handle from top
direction : "horizontal" // would be horizontal/vertical
6.Мульти
Код:
<div class="covered first">
<div class="handle"></div>
<div class="changeable"></div>
</div>
<div class="covered second">
<div class="handle"></div>
<div class="changeable"></div>
</div>
<div class="covered third">
<div class="handle"></div>
<div class="changeable"></div>
</div>
Код:
$(function() {
$('.first').coveringBad();
$('.second').coveringBad();
$('.third').coveringBad({
marginY : 20 ,
marginX : 400 ,
setX : 400,
setY : 235 ,
direction : "vertical"
});
});
вроде все ,кому не очень понятно можете посмотреть исходники,или задать вопрос в комментариях

Можешь почитать и вот эту статейку "Меню с векторными иконками"

Опрос

Ваше мнение

Как вам наш дизайн сайта?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3317 дней
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 570
  • Онлайн всего: [9]
  • Гости: [9]
  • Были сегодня : [3] Яндекс, Google, irbees2008
  • SQL запросов: 35
  • Генерация страницы: 0.173сек
  • Потребление памяти: 4.943 Mb 
  •   яндекс.ћетрика