Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате |
Форум программистов > JavaScript: для новичков > Фильтры и Эффекты перехода |
Автор: Aliance 29.3.2005, 22:45 | ||||||||||||||
Фильтры. Введение. Я бы разделил фильтры на 3 группы: - Обычные IE фильтры, думаю с ними многие знакомы. Пример:
- Более новые и сложные ActiveX. Их плюсом можно считать их разнообразие. Но они работают только в IE5.5+ Пример:
- NN6+ & Mozilla Пример:
Заметка: прозрачность можно задавать не только на прямую, указав ее уровень (0-100, где 100 - полная прозрачность). Существуют доп. стили прозрачности, такие как градиентная прозрачность. Настройки градиента: - 0 однородный (по умолчанию) - 1 линейный - 2 круговой - 3 прямоугольный Прозрачность в конце градиента устанавливается с помощью св-ва finishopacity:
Так же есть другие доп. параметры (такие как start[X|Y], finish[X|Y]), задающие координаты начала и конца градиента... JavaScript и Filters. Если нужно назначать фильтры при помощь JS - один из многих путей для этого следующий:
Замечание: для изменения/назвачения фильтров таким способом обязательно в аттрибуте style элемента должен быть объявлен данный фильтр! В Mozilla JS управление прозрачностью осуществляется через св-во style.MozOpacity (в Mozilla нет поддержки градиента) Управление различными св-вами фильтров происходит так:
Практическое применение. Rollover смена картинок с предварительной загрузкой и эффектом перехода (2 варианта: IE и ActiveX) 1) http://files.vingrad.ru/Aliance/statii/rollover1.html 2) http://files.vingrad.ru/Aliance/statii/rollover2.html В кодах сценариев уже есть комментарии, немного расскажу алгоритм их работы: Используемые там метода play() и apply() - методы для работы с фильтрами. Они действуют в пределах одной странице, поэтому их применяют для создания эффектов перехода изображений. Если же Вам необходимо сделать тоже самое между страницами - фильтры помещаются в meta теги:
Вернемся к методам play() и apply(). Второй фиксирует вид елемента, к фильтру которого обращается сценарий. Это дает возможность изменить настройки пока элемент вне поле зрения. После этого первый метод осуществляет переход между старым (заторможенным) состояние и только что сгенерированным. Замечание: Использовались аватары http://vingrad.ru/@Sardar и http://vingrad.ru/@Elfet © ![]() Данный эффект сделан с помощью фильтра Fade. О типах фильтров я расскажу чуть позже :-) |
Автор: Aliance 6.4.2005, 20:38 |
Вот тут очень хороший справочник по фильтрам: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/filters.asp А тут отличный тренажер, с которым Вы сможите увидеть, как работать с фильтрами: http://msdn.microsoft.com/workshop/samples/author/dhtml/DXTidemo/DXTidemo.htm |
Автор: elennaro 29.4.2005, 14:34 |
Это все классно! А что есть еще для Mozilla JS? Какие там еще есть фильтры - и есть ли где нить дока с их описанием? |
Автор: Aliance 29.4.2005, 20:36 | ||||||
![]()
Они совпадают с ИЕвскими. Напишу как будет время... Кстати недавно на quirksmode по-моему читал, что новая мозилла для удобства убрала "свои" фильтры и теперь поддерживает их как и ИЕ...
|
Автор: elennaro 30.4.2005, 08:37 |
Спасибо! Буду эксперементировать... С детства старался писать скрипты под все более менее известные броузеры начиная с IE4-NN4, но с фильтрами не получается. Щаз забью и буду писать под IE (Интересно, это этично...). А в принципе надо ориентироваться на людей у которых старые броузеры, или это их проблемы (типа могут обновить свой броузер =)? |
Автор: Aliance 30.4.2005, 15:17 | ||||
http://forum.vingrad.ru/index.php?showtopic=45669
|
Автор: butionok 24.9.2005, 21:21 | ||||
Как изменить прозрачность такого фильтра через JS?
не работает. И вообще, такое возможно в ФФ и НН? |
Автор: Sardar 24.9.2005, 21:31 |
Нет, в лисе и других "фильтры" это CSS стили, следовательно меняем через style. Полезно почитать: http://forum.vingrad.ru/index.php?showtopic=60704&view=findpost&p=486582 |
Автор: SelenIT 15.11.2006, 03:05 |
Aliance, спасибо за ссылки и примеры, но хочется уточнить: верно ли я понимаю, что здесь слово "фильтры" трактуется в широком смысле, примерно как "визуальные спецэффекты"? Мне кажется, что называть проприетарные CSS-свойства типа "-moz-opacity" и "-moz-border-radius" фильтрами не совсем верно. Все-таки как таковой filter (равно как expression и behavior) - это сугубо Microsoft-овские надстройки над CSS, для работы с ними предусмотрены специальные методы (разумеется, IE-only), а единственный стандарт для них - MSDN. Мозилловские же расширения в большинстве своем являются "обкаткой" обычных CSS-свойств, которые затем (когда эксперты W3C приходят к единому взгляду на них) входят в стандарт CSS следующего поколения (на сегодняшний день это CSS3). Если же валить их в одну кучу, может быть путаница (или она уже началась?). Тем более, что иногда "CSS-фильтрами" и вовсе называют CSS-хаки, с помощью которых разделяют стили для разных браузеров... Если я заблуждаюсь - пожалуйста, поправьте меня и удалите этот пост. И прошу извинить меня за невиданную наглость - поправлять модератора в прикрепленном топике... |
Автор: Aliance 16.11.2006, 19:34 |
Ты прав, но т.к. данный топик существует в разедле для новичков, то конечной целью являеться получение результата в большей степени, чем терминологии (хотя это по сути не совсем верно). Скажем так: стили это нечто общее, а CSS-свойства типа "-moz-opacity" и "-moz-border-radius" - это альтернатива некоторых фильтров IE для Mozilla. Так, наверное, будет более точно. |
Автор: lasalexx 23.12.2006, 23:12 | ||
но в firefox картинка всё равно не прозрачная |
Автор: Sardar 23.12.2006, 23:17 |
lasalexx, только ИЕ работает с процентами, весь остальной мир (включая стандартный opacity) с числами от 0-1. |
Автор: lasalexx 23.12.2006, 23:31 | ||
большое спасибо. в официальной документации на счет фильтров в мозиле ничего нет. есть ли у мозилы ещё какие нибудь фильтры. может напишите все, или кините ссылку |
Автор: Loengreen 21.7.2007, 03:11 | ||||
Пытаюсь сделать тень для окошка (только для IE). попробовал воспользоваться следующим фильтром.
Хотел сделать 2 прямоугольника: первый - тень снизу, второй - справа, и 3 квадрата - закругления. Используя этот фильтр получилось сделать полупрозрачный градиент слева направо и наоборот. Сделать градиент сверху вниз не получается. :( Так же не получилось сделать круговой градиент с центром на одном из углов квадрата. Возможно ли вообще сделать то что я хочу с помощью этого фильтра? Приведите пожалуйста пример создания градиента с изменением цвета сверху вниз и пример с использованием координат для задания начальной и конечно точки градиента.
Приведенный выше код никакого результата не дает. Пробовал писать координаты через "," и указывать их в пикселях... ничего. (start[345px, 8px], finish[345px, 16px]) - такая запись координат тоже ничего не дала) :( |
Автор: NNaarreekk 28.7.2007, 22:09 |
Хорошие примеры есть http://www.woweb.ru! мне очень помогли! |
Автор: almostlost 29.12.2007, 11:33 | ||||||||||||||||||||||||||
alpha Фильтр Alpha устанавливает степень прозрачности объекта. Прозрачность может быть установлена, как равномерная для всего объекта, так и в виде градиента Синтаксис:
Параметры Opacity Значение прозрачности от 0 до 100. 0 - абсолютно прозрачно, 100 - абсолютно непрозрачно FinishOpacity Необязательный параметр, который определяет конечное значение прозрачности, если фильтр применяется как градиентный см. Style. От 0 до 100. 0 - абсолютно прозрачно, 100 - абсолютно непрозрачно Style 0 - равномерная прозрачность, 1 - линейный градиент, 2 - круговой градиент, 3 - прямоугольный градиент StartX Начальные координаты градиента по горизонтали StartY Начальные координаты градиента по вертикали FinishX Конечные координаты градиента по горизонтали FinishY Конечные координаты градиента по вертикали ------------------------------------------------------------------------------------------------------------ blur Фильтр Blur размывает изображение в направлении Direction, заданном в градусах. Если указано Add=1, то фильтр будет наложен на исходный образец, иначе будет отображен только результат работы фильтра Синтаксис:
Параметры Add Объект. 0 - результат работы фильтра, 1 - фильтр будет наложен на исходный образец Direction Направление размытия объекта в градусах (0 - вверх и далее по часовой стрелке c шагом 45 градусов) Strength Степень размытия ----------------------------------------------------------------------------------------------------------- chroma Фильтр Chroma делает цвет, заданный в форме #RRGGBB прозрачным. Фильтр хорошо применять к изображениям, созданным в формате gif либо png. Для jpeg он обычно не дает хороших результатов, так как для данного формата трудно определить границы заливки отдельных цветов Синтаксис:
----------------------------------------------------------------------------------------------------------- DropShadow Фильтр DropShadow рисует сплошной силует объекта, смещённый в заданном направлении, создавая тем самым эффект объекта, расположенного над страницей и отбрасывающего на неё тень Синтаксис:
----------------------------------------------------------------------------------------------------------- flipH Фильтр FlipH переворачивает объект горизонтально Синтаксис:
----------------------------------------------------------------------------------------------------------- flipV Фильтр FlipV переворачивает объект вертикально Синтаксис:
----------------------------------------------------------------------------------------------------------- glow Фильтр GLOW добавляет свечение вдоль внешних границ объекта, создавая эффект "возгорания" границ объекта Синтаксис:
Параметры Stregth Сила свечения в диапазоне 0-100 Color Цвет свечения ----------------------------------------------------------------------------------------------------------- Gray Фильтр Gray удаляет цветовую гамму объекта и отображает его в серых тонах Синтаксис:
----------------------------------------------------------------------------------------------------------- Invert Фильтр Invert меняет оттенок, насыщение и яркость объекта на противоположные Синтаксис:
----------------------------------------------------------------------------------------------------------- Mask Фильтр Mask отображает текст так, как будто он выделен мышью Синтаксис:
Параметры Color Цвет, окружающий текст ----------------------------------------------------------------------------------------------------------- DropShadow Фильтр DropShadow рисует сплошной силует объекта, смещённый в заданном направлении, создавая тем самым эффект объекта, расположенного над страницей и отбрасывающего на неё тень Синтаксис:
Параметры Color Цвет тени OffX Смещеение тени относительно текста по оси X OffY Смещеение тени относительно текста по оси Y positive Характер освещения (0 или 1) ----------------------------------------------------------------------------------------------------------- Wave Фильтр Wave производит "синусоидальное" искажение объекта вдоль вертикальной оси Синтаксис:
Параметры add Булево значение, определяющее использование оригинала (0 или 1). По умолчанию 0 freq Количество волн lightStrength величина подсветки phase начальная фаза. По умолчанию - 0, изменяется от 0 до 100 strength величина смещения ----------------------------------------------------------------------------------------------------------- xray Фильтр XRay отображает объект в черно-белом варианте, как на рентгеновском снимке Синтаксис:
|
Автор: AKS 30.12.2007, 08:40 |
almostlost, откуда такие "древние" и неточные данные? На смену названиям фильтров, реализованным в IE 4, уже давным-давно пришли те, что были реализованы в IE 5.5 (2000 год!). А об этом - ни слова. Более того, за отличием в синтаксисе кроются еще и отличия в реализации визуального представления (все подробности есть на сайте разработчиков). Насчет неточностей. Первое, что бросилось в глаза - это описание фильтра mask (теперь это название записывается так: "progid:DXImageTransform.Microsoft.MaskFilter"). Точное описание будет звучать примерно следующим образом: "Отображает прозрачный цвет объекта цветом, указанным в первом параметре, а непрозрачный цвет делает прозрачным". |
Автор: pwsem 19.4.2012, 22:11 |
спасибо!) долго искал) |