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

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

irbees2008 irbees2008 Опубликовано - 2 - ноября Изображения
2961 - 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"
});
});
вроде все ,кому не очень понятно можете посмотреть исходники,или задать вопрос в комментариях

Можешь почитать и вот эту статейку "Настройка плагина breadcrumbs - "Хлебных крошек""

Опрос

Ваше мнение

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

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

Теги

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

Статистика

  • Caйту: 3834 дня
  • Новостей: 561
  • Комменты: 254
  • Зарегистрированно : 621
  • Онлайн всего: [4]
  • Гости: [4]
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 32
  • Генерация страницы: 0.536сек
  • Потребление памяти: 6.203 Mb 
  •   яндекс.ћетрика