您的位置：首页 > 其它

div淡出淡入的方法原理

2010-06-29 00:23 183 查看 
[code]     [code]function click2() {


var o = document.getElementById("div");


//在IE中 filters属性控制元素的透明度(类似数组的对象). 原div没有设置透明度.那么o.filters的length为0


if (o.filters) {


o.style.filter = 'alpha(opacity=' + 0 + ')';


//设置了filter样式的值(注意 是 style.filter)后,filters属性的length变成1


//于是就可以用obj.filters[0].opacity来访问了


}


else


o.style.opacity = 0; o.style.display = "";


ShowOrHide(o, 100, 0, function() { alert('回调'); });


}


function ShowOrHide(obj, start, end, callback) {            //四个参数,第一个为对象,2为起始，3为目标,4为回调函数            //当起始>目标，则显示，反之则隐藏


if (obj.filters) {


obj.filters[0].opacity = start;


}


else


obj.style.opacity = start * 0.01;


if (start != end) {


if (start < end)


start += 10;


    else


start -= 10;


setTimeout(


function() {


ShowOrHide(obj, start, end, callback)


    },100);


}


else


arguments[3].call(null);


}

[/code]
[/code]

[code]
[code]<body>


<input type="button" id="btn" onclick="click2()" value="222" /><div style="display: none;


width: 200px; height: 200px; background-color: Red" id="div">


</div>


</body

[/code]
[/code]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航