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

Можешь почитать и вот эту статейку "С Наступающим Новым 2015 Годом"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

На каком движке ваш сайт?
Результаты

----