div淡出淡入的方法原理

最新推荐文章于 2021-07-02 10:09:47 发布

weixin_30519071

最新推荐文章于 2021-07-02 10:09:47 发布

阅读量87

点赞数

版权

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);

<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

转载于:https://www.cnblogs.com/jianjialin/archive/2010/06/29/1767145.html

关注