Пятница, 2024-03-29, 7:20 PM

Поиск
Меню
Категории раздела
PHP [40]
Cкриптовый язык программирования общего назначения
MySQL [1]
Cвободная система управления базами данных (СУБД)
jQuery [8]
Библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML
CSS [60]
Cредство описания, оформления внешнего вида веб-страниц
JavaScript [161]
Прототипно-ориентированный скриптовый язык программирования
Веб-дизайн [2]
Проектирование пользовательских веб-интерфейсов для сайтов или веб-приложений
RegExp [1]
Регулярные выражения
SEO [2]
Продвижение и раскрутка сайтов. Заработок в сети.
C/C++ [3]
Компилируемый статически типизированный язык программирования общего назначения
Windows [4]
Программистам под ОС MS Windows
HGE [2]
Игровой движок HGE (Haaf's Game Engine)
Игровой дизайн [8]
Психология дизайна игр
Разработка игр [2]
Общие моменты, относящиеся к геймдеву
wxWidgets [2]
Библиотека инструментов для разработки кроссплатформенных приложений
PureBasic [10]
Кроссплатформенный компилятор и IDE для быстрой разработки
VST [6]
Steinberg's Virtual Studio Technology (VST)
iOS [1]
Mобильная операционная система, разрабатываемая и выпускаемая американской компанией Apple
Пиксельная графика [9]
Pixel art и все, что с ним связано
libGDX [2]
Кроссплатформенный открытый движок на Java, позволяющий создавать 2D и 3D игры под различные платформы, среди которых: Android, HTML5, Windows, Linux, iOS.
Поддержи проект!
Рекомендуем


Блог разработчика

Главная » 2013 » Июль » 23 » Осветление фото для всех браузеров. Фильтр gradualFader для постепенного проявления блока, фото при наведении (для всех браузеров)
11:11 PM
Осветление фото для всех браузеров. Фильтр gradualFader для постепенного проявления блока, фото при наведении (для всех браузеров)
Cмотреть пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
 <title>
 Осветление фото для всех браузеров Фильтр gradualFader для постепенного проявления блока, фото при наведении (для всех браузеров)
 </title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <style type="text/css">
.gradualfader{filter:progid:DXImageTransform.Microsoft.alpha(opacity='+gradualFader.baseopacity*100+'); -moz-opacity:'+gradualFader.baseopacity+'; opacity:'+gradualFader.baseopacity+';}
 </style>
 <script type="text/javascript">
var gradualFader={}
 gradualFader.baseopacity=0.4 
 gradualFader.increment=0.2 



 gradualFader.setopacity=function(obj, value){ 
 var targetobject=obj
 if (targetobject && targetobject.filters && targetobject.filters[0]){ 
 if (typeof targetobject.filters[0].opacity=="number") 
 targetobject.filters[0].opacity=value*100
 <!-- SE@RCHER Javascript www.03www.su 2009 год -->
 else 
 targetobject.style.filter="alpha(opacity="+value*100+")"
 }
 else if (targetobject && typeof targetobject.style.MozOpacity!="undefined") 
 targetobject.style.MozOpacity=value
 else if (targetobject && typeof targetobject.style.opacity!="undefined") 
 targetobject.style.opacity=value
 targetobject.currentopacity=value
 }
 gradualFader.fadeupdown=function(obj, direction){
 var targetobject=obj
 var fadeamount=(direction=="fadeup")? this.increment : -this.increment
 if (targetobject && (direction=="fadeup" && targetobject.currentopacity<1 || direction=="fadedown" && targetobject.currentopacity>this.baseopacity)){
 this.setopacity(obj, targetobject.currentopacity+fadeamount)
 window["opacityfader"+obj._fadeorder]=setTimeout(function(){gradualFader.fadeupdown(obj, direction)}, 50)
 }
 }
 gradualFader.clearTimer=function(obj){
 if (typeof window["opacityfader"+obj._fadeorder]!="undefined")
 clearTimeout(window["opacityfader"+obj._fadeorder])
 }
 gradualFader.isContained=function(m, e){
 var e=window.event || e
 var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
 while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
 if (c==m)
 return true
 else
 return false
 }
 gradualFader.fadeinterface=function(obj, e, direction){
 if (!this.isContained(obj, e)){
 gradualFader.clearTimer(obj)
 gradualFader.fadeupdown(obj, direction)
 }}
 gradualFader.collectElementbyClass=function(classname){
 var classnameRE=new RegExp("(^|\\s+)"+classname+"($|\\s+)", "i")
 var pieces=[]
 var alltags=document.all? document.all : document.getElementsByTagName("*")
 for (var i=0; i<alltags.length; i++){
 if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1)
 pieces[pieces.length]=alltags[i]
 }
 return pieces
 }
 gradualFader.init=function(){
 var targetobjects=this.collectElementbyClass("gradualfader")
 for (var i=0; i<targetobjects.length; i++){
 targetobjects[i]._fadeorder=i
 this.setopacity(targetobjects[i], this.baseopacity)
 targetobjects[i].onmouseover=function(e){gradualFader.fadeinterface(this, e, "fadeup")}
 targetobjects[i].onmouseout=function(e){gradualFader.fadeinterface(this, e, "fadedown")}
 }}
 </script>
 </head>
 <body>
 <p>
 <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html40" alt="Valid HTML 4.0 Transitional" height="31" width="88"></a>
 </p><img src="pic/004.jpg" width="300" class="gradualfader" alt=""> <script type="text/javascript">
gradualFader.init() 
 </script><br>
 <br>
 W3C в своей рекомендации CSS3 определяет свойство opacity для применения эффекта прозрачности к элементам страницы. Значением данного свойства является число в диапазоне от 0.0 до 1.0. При
 значении равном нулю элемент становится полностью прозрачным, а при значении равном единице, соответственно, совсем не прозрачным. Свойство можно применять к любым элементам страницы.<br>
 Понимают CSS3 свойство opacity следующие браузеры: Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9
 </body>
</html>
Категория: JavaScript | Просмотров: 986 | Добавил: poster | Теги: пример, Код, JavaScript, js | Рейтинг: 0.0/0

Поблагодарить автора



Комментарии