Квартиры, дома, земельные участки Краснодарского края без посредников. Объявления собственников недвижимости.
Реклама здесь
Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

Переливы прозрачности. Плавные изменения свойств.



Работает во всех браузерах!

Исходный код этого примера:
<style type="text/css">
#a {
 background-color: red;
 border: 1px solid navy;
 padding: 10px;
 filter: Alpha(Opacity=10); /* IE */
 -moz-opacity: 0.1; /* mozilla */
 -khtml-opacity: 0.1; /* KHTML Engine(Konquerror) */
 opacity: 0.1; /* CSS3 */
}
</style>
<script type="text/javascript">
<!--
function showElement(show, obj, time, resolution) {
 resolution=(resolution>0? resolution: 50); //пауза между фреймами
 var step=(show? 1: -1)*(1/(time>0? time: 1000))*resolution; //шаг в процентах от заданного времени
 var opacity=(typeof(obj.style.KhtmlOpacity)!="undefined")? parseFloat(obj.style.KhtmlOpacity): //konquerror и его семейство
             (typeof(obj.style.MozOpacity)!="undefined")? parseFloat(obj.style.MozOpacity): //мозилла и прочие Gecko. мозилла не покажет какое сейчас значение, если его не меняли...
             (typeof(obj.filters)!="undefined")? obj.filters.Alpha.Opacity.value/100: //IE вариант
             (typeof(obj.style.opacity)!="undefined")? parseFloat(obj.style.opacity): //не стоит доверять, может не undefined для понту, а всё равно не поддерживаеться CSS3
             null; //нет прозрачности как таковой
 if(opacity==null) return;
 opacity=isNaN(opacity)? (show? 0: 1) : opacity; //тест на вшивость
 //и так здесь мозилла(возможно konquerror) обложалась, мы не можем узнать значение opacity если оно не менялось
 //потому в первый раз возьмём как будто мы находимся на границе, либо 0, либо 1
 var timer=window.setInterval(function() {
    if((opacity+=step)>=1||opacity<=0) window.clearInterval(timer);
    if(obj.filters) obj.filters.alpha.opacity=Math.round(opacity*100);
    obj.style.KhtmlOpacity=obj.style.MozOpacity=obj.style.opacity=opacity;
 }, resolution);
}
//-->
</script>

<h1>Переливы прозрачности. Плавные изменения свойств.</h1>
<br />
<div style="float:left;">
<img src="../ann.jpg" width=200 id="a">
<br>
<input type=submit value="Скрыть" onClick="showElement(0,document.getElementById('a'),0,0)">
<input type=submit value="Отобразить" onClick="showElement(1,document.getElementById('a'),0,0)">
</div>
Скопировать в буфер
Шкафы-купе! Кухни - мебель на заказ.

© Copyright 2008-2012 by KDG