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

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

irbees2008 irbees2008 Опубликовано - 2 - ноября Изображения
3283 - 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йту: 4365 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 660
  • Онлайн всего: [15]
  • Гости: [15]
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 34
  • Генерация страницы: 0.644сек
  • Потребление памяти: 6.118 Mb 
  •   Яндекс.Метрика