Javascript: исчезать элемент из указанной непрозрачности до указанной непрозрачности? - PullRequest
Новая
       24

Javascript: исчезать элемент из указанной непрозрачности до указанной непрозрачности?

0 голосов
/ 14 января 2010

Я пытаюсь найти функцию, которая может скрыть элемент от указанной прозрачности до указанной прозрачности. Например, от 0 до 0,7, но все, что я могу найти, просто затухает или от 0 до 1 или от 1 до 0. Я не могу найти ничего, что позволило бы вам указать, что и для чего. Мои попытки реверс-инжиниринга функций, которые я нашел, также потерпели неудачу, так как каждый найденный мной пример был довольно загадочным.

Также я хочу сделать это БЕЗ каких-либо рамок.

Спасибо !!

Ответы [ 3 ]

3 голосов
/ 14 января 2010

В этом нет особой хитрости, вы просто устанавливаете стиль непрозрачности на значение, отличное от 0 или 1, в течение времени / интервала времени.

Вот урезанная функция затухания, которую вы можете использовать в качестве отправной точки. 

<script type="text/javascript">
    function fade(element, o0, o1, t) {
        // IE compatibility. Detect lack of native 'opacity' support, and ensure element
        // has layout for IE6-7.
        //
        var canopaque= 'opacity' in element.style;
        if (!canopaque && 'currentStyle' in element && element.currentStyle.hasLayout===false)
            element.style.zoom= '1';

        function setOpacity(o) {
            if (canopaque)
                element.style.opacity= ''+o;
            else
                element.style.filter= 'alpha(opacity='+Math.round(o*100)+')';
        }

        var t0= new Date().getTime();
        setOpacity(o0);
        var interval= setInterval(function() {
            var dt= (new Date().getTime()-t0)/t;
            if (dt>=1) {
                dt= 1;
                clearInterval(interval);
            }
            setOpacity(o1*dt+o0*(1-dt));
        }, 25);
    }
</script>
<p id="foo"> hello. </p>
<button onclick="fade(document.getElementById('foo'), 0.7, 0, 2000);">fade 0.7 to 0</button>
0 голосов
/ 14 января 2010

Используйте код из этого примера: 

<html>
<head>
<title> </title>
    <script>
var nereidFadeObjects = new Object();
var nereidFadeTimers = new Object();
var opacitiz=0;  

//Функция предназначена для нумерации тегов
window.onload=function() {
  var e=document.getElementsByTagName('*')
  for (var i=0,l=e.length;i<l;i++) e[i].sourceIndex=i
}

//Вызов nereidFade() для разных браузеров при наведение и отводе курсора мышкой
            //@param object определяет из какого тега был вызов
//@param num -- 1  - навели курсов мышкой, 0 - отвели курсор мышки                        
function KrossBrows(object,num) {
        if (num==1) 
                if (!document.all) nereidFade(object, 1,30,0.1);
                else nereidFade(object, 100,30,10);
        else
                if (!document.all) nereidFade(object, 0.3,50,0.05);
                else nereidFade(object, 30,50,5);
}

//Отвечает за прозрачнность 
//@param object определяет из какого тега был вызов
//@param destOp конечная позиция для выполнения прозрачности
    //@param rate время которое потребуется на вызов функции
//@param delta шаг для прозрачности
function nereidFade(object, destOp, rate, delta){
        if (!document.all) opacitiz=object.style.opacity;
        else opacitiz=object.filters.alpha.opacity;

        clearTimeout(nereidFadeTimers[object.sourceIndex]);
        diff = destOp-opacitiz;
        direction = 1;
        if (opacitiz > destOp) direction = -1;

                delta=Math.min(direction*diff,delta);
        if (!document.all)                 object.style.opacity=parseFloat(object.style.opacity)+(direction*delta);
        else object.filters.alpha.opacity+=direction*delta;

    if (opacitiz != destOp){
            nereidFadeObjects[object.sourceIndex]=object;
                nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    }
}
</script>
</head>
<body>
<IMG onmouseover="KrossBrows(this,1)" style="FILTER: alpha(opacity=30);opacity:0.3"     onmouseout="KrossBrows(this,0)" height=31 alt="" src="ace.gif" width=88 vspace=2     border=0></A>
<IMG onmouseover="KrossBrows(this,1)" style="FILTER: alpha(opacity=30);opacity:0.3"     onmouseout="KrossBrows(this,0)" height=31 alt="" src="ace.gif" width=88 vspace=2     border=0></A>
</body>
            </html>
0 голосов
/ 14 января 2010

Все библиотеки эффектов фреймворков, такие как JQuery или Prototype, допускают переход от произвольных значений и к ним.

Редактировать: Извините, я перечитал, что вы не хотите использовать какие-либо рамки. Но они должны хотя бы дать вам представление, как это сделать. Кроме того, должно быть легко настроить любую функцию затухания, чтобы переходить от x к y вместо 0 к 1 - вам просто нужно настроить целевые значения от 0 или 1 до некоторого промежуточного значения.

...