|
|
Webobzor.net -> Статьи -> Java Script
Эффект прозрачности в JavaScript13.12.2006 22:12
Эффект прозрачности изображения можно добится не только фильтрами IE, но и стандартными средствами CSS. При этом эффект будет отображатся под любым браузером.
Создание эффекта прозрачности в Internet Exlorer осуществляется при помощи фильтра alpha(opacity=n), где n - степень прозрачности в процентах (0-100). Чем меньее n, тем прозрачнее изображение. Пример:
<img src='picture.jpg' style='filter:alpha(opacity=60)'>
Данный фильтр будет работать только под IE. Для создания аналогичного эффекта в других браузерах используется свойство CSS - opacity. При этом, значение коэффициентра прозрачности лежит от 0 до 1. Пример:
<img src='picture.jpg' style='opacity: 0.6'>
Соответственно, что бы эффект отображался под любым браузером необходимо совместить оба свойства:
<img src='picture.jpg' style='filter:alpha(opacity=60); opacity: 0.6'>
при этом IE проигнорирует свойство opacity, а Mozilla и Opera проигнорируют filter.
В статье "Эффект плавного перехода на JavaScript" рассматривался пример использования плавной смены картинок при помощи фильтра прозрачности для IE. Предлагаем вашему внимаю аналогичный эффект, но работающий и под IE, и под Opera с Mozilla:
<script language=JavaScript>
var m = new Array(0,100);
var t = new Array();
function next() {
m[0]+=1;
m[1]-=1;
document.getElementById("a1").style.opacity = m[1]/100;
document.getElementById("a1").style.filter="alpha(opacity="+m[0]+")";
document.getElementById("a2").style.opacity = m[0]/100;
document.getElementById("a2").style.filter="alpha(opacity="+m[1]+")";
t[0] = setTimeout("next()",5);
if (m[0]>98) clearTimeout(t[0]);
}
</script>
HTML код:
<div id=a1 style='position: absolute; top: 100px; left: 100px'>
<img src='picture1.jpg'>
<div>
<div id=a2 style='position: absolute; top: 100px; left: 100px; opacity: 0'>
<img src='picture2.jpg'>
</div>
<div onclick='next()' style='cursor: pointer'>
Посмотреть эффект
</div>
Результатом работы скрипта будет вот такой симпатичный эффект плавной смены картинок. При этом, в div, где расположены картинки, можно загонять не только изображения, но и текст и другие объекты:
Посмотреть эффект
Повтор эффект
webobzor.net
Комментарии: [66]  | Badong | 20.02.2007 09:32 | | Хм... Работает, говорите?)
Пробовал Оперой - болт, пробовал Мозилкой - болт, ие (беее... мерзость) даже попробовал... Грустно. |
|
 | intelll  | 20.02.2007 13:37 | | чето не работает в Опере однако!.. |
|
 | lexa | 25.02.2007 22:20 | | Однако надо включить в браузере поддержу JavaScript, у меня все замечательно работает |
|
 | ника  | 12.03.2007 12:26 | | А как можно этот эффект применить при переходе от одной веб страницы к другой? Заранее благодарен...... |
|
 | lexa | 13.03.2007 15:24 | | Скоро выложу пример |
|
 | iamd | 16.03.2007 18:44 | | опера и прочие мозиллы - прихоти недалеких людей. Один фиг 85% используют человеческий эксплорер. Так зачем подстраиваться под извращенцев/мазохистов с левыми браузерами? |
|
 | lexa  | 23.03.2007 04:48 | | Когда то я тоже так думал... но на самом деле, если даже из жизни пример взять. В мире 97% здоровых людей и 3% инвалидов, но ведь для инвалидов делают скидки, сооружают специальные места в автобусах, подстраиваются под них. В случае с другими браузерами - это просто уважение ко всем БЕЗ исключения пользователям, несмотря на то, каким браузером они пользуються. |
|
 | kecl | 05.04.2007 13:04 | | Ага, пользуйся lynx-ом и требуй соблюдения своих прав )) |
|
 | lexa  | 05.04.2007 22:00 | | Да, линуксоиды тоже люди ) |
|
 | titaniMOZG  | 18.04.2007 11:39 | | Я под Оперой 9.1. смотрел, и все прекрасно отображалось... Отличный скрипт! |
|
 | vot  | 27.04.2007 17:27 | | if (window.ActiveXObject) obj.style.filter = "alpha(opacity=" + m[1]+ ")";
else obj.style.opacity = m[1]/100;
--
так думаю несколько правильней
намек! практически для всех бр.
style.cssText = "FILTER: alpha(opacity=50); moz-opacity: 0.5; opacity: 0.5; khtml-opacity: 0.5;"
|
|
 | dp | 01.05.2007 10:28 | | Отлично работает на Safari, FF2, Opera 9.10 для мака. Респекты. |
|
 | lexa | 01.05.2007 22:57 | | Супер, спасибо за инфу, а то под маком затруднительно проверить ) |
|
 | MeXaon | 05.05.2007 21:22 | | Спасибо очень красиво получается.
2iamd
Я раньше тоже так думал, но сначала решил проверить за что же так хвалят оперу, я на тот момент кроме оперы и эксплорере ни о чем не слышал. Опера мне понравилась больше, но ее плохое отображение страниц меня напрягало потом. Узнал об FireFox и вот что тебе скажу я теперь не представляю свою жизнь без этого браузера с его огромным колличеством расширений(плагинов). |
|
 | Я | 06.05.2007 16:13 | | Вот уж кого-кого, а юзеров FireFox и Opera я бы не стал сравнивать с инвалидами. С инвалидами можно сравнить юзеров IE (75%, кстати), который криво отображает сайты, глючный и ненадёжный. Кстати, именно эти люди являются мазохистами;)
P.S.:15% в Рунете - это несколько миллионов (!!!) человек. |
|
 | lexa | 07.05.2007 03:54 | | Неужели, а ты в курсе что первоначально IE поддерживал наибольшее число стандартов, что он внес наибольший вклад в W3C стандарты? |
|
 | omega | 22.05.2007 12:34 | | Не браузер страници криво паказывает, а сайтописатели их криво пишут. |
|
 | Biggieman | 28.05.2007 00:27 | | 2lexa: Ну если внёс, то что же не поддерживает тогда эти самые стандарты?! |
|
 | Biggieman | 28.05.2007 00:32 | | Но за скрпит пасиб )) Пригодился ))) |
|
 | lexa | 28.05.2007 00:39 | | IE поддерживает наибольшее количество стандартов из числа всех браузеров. Я где-то писал статью об истории JS, и там все детально описано про браузеры что и как. |
|
 | lexa | 28.05.2007 00:40 | | Тут статья, всем рекомендую, кто не любит IE http://www.art.webobzor.net/art/105.php почитать, подумать :) |
|
 | set3 | 06.06.2007 22:04 | | В ИЕ изображение переходит как-бы рывками, дрожжит что-ли.. а в Ёпере плавно очень, ступеньки перехода не заметны. |
|
 | set3 | 06.06.2007 22:08 | | Не то чтобы кто-то ненавидел ИЕ,.. просто ИЕ - это пережитки прошлого. |
|
 | Бенитес  | 08.06.2007 23:12 | | Скажите, пожалуйста, что из ниже приведенного кода нужно выкинуть, если все что мне нужно, так это затемнить счетчики в "подвале" сайта. Т.е. мне не нужны лишние функции в коде. Спасибо.
var m = new Array(0,100);
var t = new Array();
function next() {
m[0]+=1;
m[1]-=1;
document.getElementById("a1").style.opacity = m[1]/100;
document.getElementById("a1").style.filter="alpha(opacity="+m[0]+")";
document.getElementById("a2").style.opacity = m[0]/100;
document.getElementById("a2").style.filter="alpha(opacity="+m[1]+")";
t[0] = setTimeout("next()",5);
if (m[0]>98) clearTimeout(t[0]);
}
|
|
 | lexa | 08.06.2007 23:27 | | тебе необходимо код счетчика вставить между ... и соответственно убрать все, где идет обращение к элементу a2, то есть две строчки document.getElementById("a2").style.opacity = m[0]/100; document.getElementById("a2").style.filter="alpha(opacity="+m[1]+")" |
|
 | lexa | 08.06.2007 23:28 | | счетчик надо вставить в div id="a1" |
|
 | w0rtex  | 08.07.2007 17:22 | | Скрипт отлично работает, но можете подсказать, каким ещё методом можно наложить одну картинку на другую? Мне бы хотелось чтобы я смогу добавить эти два блока прямо в таблицу. без указания top i left.Заранее спасибо. |
|
 | lexa | 09.07.2007 11:08 | | Две картинки ты никак не наложишь без позиционирования position: absolute, есть правда еще position:relative, почитай о нем, возможно получится так |
|
 | w0rtex  | 09.07.2007 22:33 | | Может есть функция в ява скрипте для того чтобы узнать position элемента? |
|
 | lexa | 10.07.2007 18:17 | | есть, document.getElementById(...).style.top и есть, document.getElementById(...).style.left :)) |
|
 | yobllik | 23.07.2007 00:14 | | iamd ты долбоеб если считаешь ИЕ нормальным браузером. в мире процентов 90 гопарей и мудаков и добрая часть их юзает ИЕ а здоровые люди используют оперу или ФФ |
|
 | Sister | 03.08.2007 17:37 | | omg! iamd, lexa - убейтесь |
|
 | Sister | 03.08.2007 17:43 | | Ладно, погорячился) но IE популярен ТОЛЬКО потому, что сразу установлен на винды |
|
 | lexa | 03.08.2007 19:12 | | Sister, я всегда после установки винды ставлю оперу и мозиллу (так сказать, необходимы по работе). Более того, я использую myIE, с закладками, а не чистые IE, у меня нет проблем с всплывающими окнами и выпадающими кучей окон. Хотя в последнее время (месяца два) больше мозиллой пользуюсь, там просто плагины для веб программиста есть хорошие. |
|
 | titaniMOZG  | 08.08.2007 19:15 | | Кстати, в ИЕ он выполняется как то тормазнуто, а в Сафари, например, раза в 3 быстрее... В чем прикол может быть??? |
|
 | lexa | 09.08.2007 00:26 | | Разные браузеры по разному работают. Выход: определять скриптом что за браузер и соответственно корректировать шаг. |
|
 | Sister | 10.08.2007 09:57 | | lexa: так поступают нормальные люди. Увы, таких немного( |
|
 | alex  | 21.10.2007 12:58 | | Статистика использования боузеров на примере моего сайта
Explorer 6 57.1%
Opera 9 15.8%
Explorer 7 11.8%
Firefox 2 7.8%
Opera Mini 2.8%
Opera 8 1.9%
Firefox 1 1.2%
Opera 7 0.4%
Explorer 0.4%
Safari 2 0.3%
Значит нужно не обзывать пользователей какого-то
броузера уродами, а просто пытаться оптимизировать
код с учетом всех вкусов
|
|
 | Васыль  | 27.10.2007 09:36 | | А оптимизировать код под все браузеры невозможно, потому что если можно в лисе сделать округлые таблицы, то в других таких функций нет, или использовать только основные и те функции которые есть во всех браузерах |
|
 | lexa | 29.10.2007 08:47 | | Есть специальный скрипт, который делает закругленные таблицы под любой браузер |
|
 | Sterh | 04.03.2008 15:54 | | Плз, подскажите, все отлично работает, но когда ставлю размер шрифта в ИЕ 24px, то при появлении шрифт становится рубленным, прозрачные пиксели становятся в 100% и выглядит просто ужасно!
Можно ли этим как-то бороться ?..
Заранее большое спасибо! |
|
 | lexa29 | 05.03.2008 14:00 | | вроде как можно использовать свойство сглаживания шрифта, не помню как оно называется, но точно знаю, что оно есть. |
|
 | TON1K  | 08.04.2008 00:32 | | народ - а как сделать обратный ход - ну как на примере - туда и обратно ..тоесть нажал на текст - появилась одна картинка, нажал на другой - появилась первая....
ps - если можно - напишите на мыло ton1k@ton1k.net |
|
 | lexa | 08.04.2008 12:22 | | на форуме смотри, там такое есть |
|
 | lexa | 08.04.2008 13:35 | | А вообще статья про слайдшоу тут http://art.webobzor.net/art/125.php |
|
 | ddvhouse | 09.04.2008 07:48 | | lexa, а как обратиться через яву к a:link и a:hover ? |
|
 | lexa29 | 09.04.2008 12:13 | | хм,а зачем к ним обращаться? если просто к ссылке через JS, то просто document.anchors("name ссылки") |
|
 | ddvhouse | 09.04.2008 22:45 | | У меня в CSS, через :link и :hover меняется background при наведении.
#m1:link, #m1:visited {background:url(../images/bl.gif) 0 0 no-repeat}
#m1, #m1:hover {background:url(../images/bl-u.gif) 0 0 no-repeat}
Нужно, что б после выполнения яваскприпта, картинки поменялись на br и br-u соответственно. |
|
 | ALX | 12.05.2008 20:50 | | Говно опера.
Работает, конечно, везде, но Опера как-то странно реагирует на то, если в картинке есть прозрачность заведомо. Ну а вообще IE - просто это Г... не хочет соблюдать W3C рекомендации. |
|
 | ALX | 13.05.2008 17:18 | | после ночного штурма, я нашел решение самостоятельно.
Опера не понимает gif прозрачности, но корректно работает с прозрачностью в png.
Описываем стили для opera, safari
а в файле xxx_opera.css меняем картинки
(У меня каритнки для фона (темы оформления) были, поэтому все меняется через css). |
|
 | ALX | 13.05.2008 17:21 | | <link rel="stylesheet" href="xxx_opera.css" type="opera/css" />
Это вверху файл исчез, как тег ))
_______
ну вот где удобный UI? моглиб теги и не обрабатывать
или предупреждать вначале. |
|
 | Lilit | 20.08.2008 19:48 | | Подскажите пожалуйста, как сделать, чтобы картинки сами менялись с заданным периодом. Т.е чтобы после загрузки странички постоянно менялись например 5 картинок .
большое спасибо ) |
|
 | lexa | 21.08.2008 02:18 | | завтра постараюсь ответить на этот вопрос, сейчас сплю... ) |
|
 | Lilit | 21.08.2008 16:53 | | ok ) Жду с нетерпением ) Спасибо |
|
 | lexa | 21.08.2008 19:27 | | кинул на форум рабочий пример, смотри... |
|
 | Маська | 27.08.2008 00:48 | | Спасибки, Вы подарили мне самый лучший подарок на день рожденья!!!!!! ^_^ ))) |
|
 | Lilit | 08.09.2008 05:21 | | уси пуси ^_^ |
|
 | Lilit | 08.09.2008 05:23 | | Т.е, большое спасибо )
за спасение для неграмотных |
|
 | Alazaur | 22.10.2008 04:12 | | Добавил в избранное)) Завтра буду пробовать... и почему такие вещи всегда в четыре часа ночи находятся=)) |
|
 | lexa | 22.10.2008 07:40 | | найди статью по новее, это старая статья, работающая только под IE |
|
 | Alazaur | 23.10.2008 02:44 | | Эта и есть новая, работающая под всеми браузерами))) Lexa, пора тебе в отпуск, раз сам в своих статьях путаться начал :) |
|
 | lexa | 23.10.2008 11:33 | | ааа сорри, это я чуваку одному на другой статье отписывался, и че то сюда запостил )) |
|
 | Uly  | 31.10.2008 07:20 | | Хочу посоветоваться, возможно ли создать эффект плавного перехода для фона ячейки таблицы. Изменить прозрачность фона ячейки могу, а сообразить как в этой же ячейке должна появиться другая картинка пока не получается. Спасите от разрыва мозга! |
|
 | lexa | 31.10.2008 12:43 | | можно конечно, заинтересовал :) попробую на днях, на форуме выложу что получилось |
|
 | Cas | 26.11.2008 23:22 | | 2>Uly
смена содержимого контейнерного тэга возможна при обращении к свойству innerHTML этого элемента - гугли |
|
 | lexa | 27.11.2008 12:48 | | он другое имеет в виду насколько я понял, он имеет в виду плавная смена фона картинки, а не содержимого... |
|
Добавить комментарий:
|
|
Популярные статьи
|
|
|
|
|
 | Последние комментарии | |
|
|
|
 | Счетчики | |
|
|
|
|
|
|