Хаки и Скрипты Next Generation CMS : Изображения : Простой плагин JQuery Covering-Bad

irbees2008 Опубликовано - 2 - ноября Изображения

Адаптировал: 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"
    });
});

вроде все ,кому не очень понятно можете посмотреть исходники,или задать вопрос в комментариях

Можешь почитать и вот эту статейку "Эффект прозрачности на CSS"

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

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