Кроссплатформенный открытый движок на Java, позволяющий создавать 2D и 3D игры под различные платформы, среди которых: Android, HTML5, Windows, Linux, iOS.
Поддержи проект!
Рекомендуем
Блог разработчика
Главная » 2013 » Июль » 23 » Осветление фото для всех браузеров. Фильтр gradualFader для постепенного проявления блока, фото при наведении (для всех браузеров)
11:11 PM
Осветление фото для всех браузеров. Фильтр gradualFader для постепенного проявления блока, фото при наведении (для всех браузеров)
<!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>