如何实现隐藏层渐现渐失？

javascript还有这种本领呐，我原来以为要用flsh才能实现呢……是不是要用什么现在时兴的Ajax啊

解决方案 »

  1.   

    <div id="div" style="width:200px;height:200px;FILTER: progid:DXImageTransform.Microsoft.BasicImage(opacity=1);background-color:#8F8F8F"> sss</div>
    <span onclick="run()"></span>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var i = 1.0;
    function run()
    {
    i = i - 0.1;
    if (i > 0)
    {
    div.style.filter = " progid:DXImageTransform.Microsoft.BasicImage(opacity=" + i + ")";
    kk();
    }
    }
    function kk()
    {
    window.setTimeout(run,100);
    }kk();
    //-->
    </SCRIPT>
      

  2.   

    用filter  FIREFOX等标准浏览器不支持。 难道没有办法能实现也支持FF的 渐隐渐现效果吗？
      

  3.   

    function Mix(c1,c2){
    var i,step1,step2,x,y,r=new Array(3);
    if(c1.length==4)step1=1;
    else step1=2;
    if(c2.length==4) step2=1;
    else step2=2;
    for(i=0;i<3;i++){
        x=parseInt(c1.substr(1+step1*i,step1),16);
        if(step1==1) x=16*x+x;
        y=parseInt(c2.substr(1+step2*i,step2),16);
        if(step2==1) y=16*y+y;
        r[i]=Math.floor((x*50+y*50)/100);//改变这个除数之间的比例可以调节改变的效果明显度
        r[i]=r[i].toString(16);
        if(r[i].length==1) r[i]="0"+r[i];
        }
    return("#"+r[0]+r[1]+r[2]);
    }=====================================================
    这个函数是得到相关颜色的，把背景和你的div颜色比对就可以
    ---------------------------------------
    如：#fefefe
    <body>
    </body>
    <SCRIPT LANGUAGE="JavaScript">
    <!--function Mix(c1,c2){
    var i,step1,step2,x,y,r=new Array(3);
    if(c1.length==4)step1=1;
    else step1=2;
    if(c2.length==4) step2=1;
    else step2=2;
    for(i=0;i<3;i++){
        x=parseInt(c1.substr(1+step1*i,step1),16);
        if(step1==1) x=16*x+x;
        y=parseInt(c2.substr(1+step2*i,step2),16);
        if(step2==1) y=16*y+y;
        r[i]=Math.floor((x*1950+y*50)/2000);
        r[i]=r[i].toString(16);
        if(r[i].length==1) r[i]="0"+r[i];
        }
    return("#"+r[0]+r[1]+r[2]);
    }var str = "#6600FF";
    var to = "#FFFF00";
    var htm = "";
    var hh = "";
    for(var i=0;i < 100;i++)
    {
    str = Mix(str,to);
    hh += "<br>" + str + "|" + i ;
    htm += "<span style=\"background-color:" + str + "\">&nbsp;</span>";
    }
    document.writeln(htm);
    document.writeln(hh);
    //-->
    </SCRIPT>
      

  4.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title></title>
    </head>
    <body>
    <div id="div" style="width:200px;height:200px;background-color:#ddeeff;filter:Alpha(Opacity=0);opacity:0;">asdfasdfsadfsadfasdfasdfsd</div>
    </body>
    <script type="text/javascript">
        var o = document.getElementById("div");
        var i=0;
        function change(){
            i++;
            o.style.filter = "Alpha(Opacity=" + i + ")"; //for IE    
            o.style.opacity = i/100; //for FF
            if(i>100) i=100;
                                   
        }
        window.setInterval(change,10);
    </script>
    </html>++++++++++++++++++++++++++++
                  1.在第二处放一个div,div中再放一个img,并且这个div是隐藏的，只有鼠标指向时才显示，如：
    <div id="c" style="display:none"><img id="i" /></div>2.将第一处的每个数字加两个事件，一个是鼠标指向时，一个是鼠标离开时，如：
    <a href="#" onmouseover="a('1.jpg');" onmouseout="b();">1</a>
    <a href="#" onmouseover="a('2.jpg');" onmouseout="b();">2</a>
    ...3.然后定义a,b两个事件，如：
    function a(url)
    {
    //找到包含图片的层
    var d = document.getElementById("c");
    //显示图片
    document.getElementById("i").src = url;
    //显示层
    d.style.display = "";
    }function b()
    {
    //隐藏层
    document.getElementById("c").style.display = "none";
    }怎么把这段显示隐藏层代码，添加onmouseover渐现onmouseout渐失的效果？
    我是js盲啊。。因为我onmouseover，onmouseout要触发传递参数，如何把这两个功能结合成一个函数啊？然后在onmouseover，onmouseout触发。。
     
      
      

  5.   

    ff虚化渐隐比较难，可能需要预加载一些特殊的透明图片
    楼主有没有考虑div渐小至隐藏？可以通过改变div（或者clip）的尺寸+overflow:hidden实现
      

  6.   

    利用js的超时来控制css滤镜
    filter:Alpha(style=0,opacity=10)
    firefox下用
    -moz-opacity:0.1
      

  7.   

    渐现渐失可以实现了。 我现在是想把我发的那两个函数结合成一个。也就是onmouseover的时候同时触发渐现和传递参数
      

  8.   

    建议LZ去下个efect.js效果库，里面提供的好多的效果绚死了~官方站是这个：http://script.aculo.us我也有，可以发给你
      

  9.   

    right,用滤镜，在IE和FireFox中都很好实现。。
      

  10.   

    js控制div层渐隐渐显
     //设置透明度 function setOpacity(obj, value){     if(document.all){         if(value == 100){             obj.style.filter = "";         }else{             obj.style.filter = "alpha(opacity=" + value + ")";             }     }else{         obj.style.opacity =value / 100 ;             } } //用setTimeout循环减少透明度 function changeOpacity(obj, startValue, endValue, step, speed){     if(step >= 0 && startValue <= endValue || step <= 0 && startValue >= endValue){          document.body.removeChild(obj);         return;     }     if(!obj)     {       return;     }     if(startValue<=0)     {       document.body.removeChild(obj);       return;     }     setOpacity(obj, startValue);     setTimeout(function(){changeOpacity(obj, startValue-step, endValue, step, speed);}, speed); } //设置隐藏速度或显示速度和id function showMsg(id){     var msg =document.getElementById(id);     var step = 5, speed = 80;     if(msg.style.display=="none")     {     msg.style.display="";     }        changeOpacity(msg, 100, 0, step, speed); } http://www.wearelearn.net/javascript/jsData_12_51/574.html