Eraser - jQuery плагин "отчищаем" изображения
827материалов
228тем на форуме
3003комментария
6152пользователя

Eraser - jQuery плагин "отчищаем" изображения


Описание скрипта:

jQuery плагины являются одними из самых необходимых компонентов при построении сайта, да и вообще любого веб-приложения. Именно они позволяют вам расширить свой функционал. Представляю Вашему вниманию легкий jQuery плагин для изображений, который обрабатывает их и оформляет фильтром. Картинку можно "отчистить" либо указателем мыши, либо сенсорным движением на мобильном устройстве. В данном примере используются элементы canvas.

Установка скрипта:

В таблицу стилей вставляем код:
Код
.container {
position: relative;
display: inline-block;
}
#robot {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-webkit-box-shadow: 0px 0px 20px 0px #707070;
-moz-box-shadow: 0px 0px 20px 0px #707070;
box-shadow: 0px 0px 20px 0px #707070;
}
      #redux {
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
}

Код картинки:
Код
<span class="container">
<img id="robot" src="http://testing.webmaster-ucoz.ru/_ph/2/2/652310669.png" />
<img id="redux" src="http://testing.webmaster-ucoz.ru/_ph/1/2/558294529.png" />
</span>

В нижнюю часть сайта:
Код
<script src='http://webmaster-ucoz.ru/ucoz/js/jquery.eraser.js' type='text/javascript'></script>
<script type = "text/javascript">
$(function(){
$('#redux').eraser({
progressFunction: function(p) {
$('#progress').html(Math.round(p*100)+'%');
}
});
});
</script>

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 28.01.2016 в 14:00
Материал просмотрен: 878 раз
Категория материала: Скрипты для uCoz
К материалу оставлены: 2 комментария

Пожаловаться
Сказать спасибо
Источник

2 комментария


=RockStar2o14=
Крутяк. Очень интересная и классная штука
veknog
veknog @veknog 28.01.2016 21:172
+2
в uCoz браузере скрипт не работает, в остальных работает
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта