00:14 Эффект прозрачности в JavaScript/обзор by SoftLand.NeT.Ru | |
 Что бы создать эффект прозрачности в Internet Explorer нужно воспользоваться фильтром alpha(opacity=n), где n - степень прозрачности в процентах (0-100). Чем меньше n, тем прозрачнее изображение.Например: Code <img src=<b>'Тут ссылка на картинку'</b> style='filter:alpha(opacity=50)'> Этот фильтр будет работать только в Internet Explorer,для создания эффекта в других браузерах надо воспользоваться свойством CSS - opacity.Есть маленькое отличие,коэффициент прозрачности должен быть от 0 до 1.Например: Code <img src='Тут ссылка на картинку' style='opacity: 0.5'> Но Вы конечно же хотите что бы эффект прозрачности изображения работал во всех браузерах даже таких примитивных как IE.Для этого просто нужно совместить эти два свойства: Code <img src='Тут ссылка на картинку' style='filter:alpha(opacity=50); opacity: 0.5'> IE будет игнорировать свойство opacity,а другие более совершенные браузеры такие как Chrome,Opera,Mozilla будут игнорировать свойство filter и все будет работать как по маслу.
Вы наверное спросите а как можно эти свойства использовать?Как угодно можно просто украсить свой сайт, а можно создать плавный переход между картинками с фильтрами (и он будет работать в всех браузерах) Code <script language=JavaScript> var m = new Array(0,100); var t = new Array(); function next() { m[0]+=1; m[1]-=1; document.getElementById("b1").style.opacity = m[1]/100; document.getElementById("b1").style.filter="alpha(opacity="+m[0]+")"; document.getElementById("b2").style.opacity = m[0]/100; document.getElementById("b2").style.filter="alpha(opacity="+m[1]+")"; t[0] = setTimeout("next()",5); if (m[0]>98) clearTimeout(t[0]); } </script> HTML код: Code <div id="b1" style="position: absolute; top: 100px; left: 100px;"> <img src="Тут ссылка на картинку"> </div> <div id="b2" style="position: absolute; top: 100px; left: 100px; opacity: 0;"> <img src="Тут ссылка на картинку"> </div> <div onclick="next()" style="cursor: pointer;"> Посмотреть эффект </div> Эффект получиться очень красивым,картинки будут плавно меняться с одной на другую.Оригинальность этого скрипта в том что можно вставлять не картинки,а текст например.Впрочем зависит от вашей фантазии. Смотреть демо: http://softland.net.ru/test/script.html Автор обзора: House Источник: SoftLand.NeT.Ru При копировании ссылку на источник и автора указать обязательно! | |
|
| |
| Всего комментариев: 0 | |