用CSS实现图片渐显的效果

最新推荐文章于 2024-06-04 17:36:46 发布

firefly-cn

最新推荐文章于 2024-06-04 17:36:46 发布

阅读量3.7k

点赞数

文章标签： css class transition html div function

本文链接：https://blog.csdn.net/m0085_cn/article/details/1504585

版权

今天读到一篇关于用CSS实现渐显效果的文章，觉得很有意思，想试一试，但是没有给具体的实现例子，从网上也找了些资料，实现方法各不相同，我自己也实现了一个可以定时渐显的例子，拿出来与大家共享，下面是html文件的源码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="Pure Zhou">
<META NAME="Description" CONTENT="">
<style>
    .visibility_s{diplay:block;width:464px;height:277px;visibility:visible;}
    .visibility_h{diplay:none;width:0px;height:0px;visibility:hidden;}
    .revealTrans{filter:revealTrans(Transition=10,Duration=2.0);}
    .display_h{diplay:none;}
    .display_s{diplay:block;}
</style>

<script>
    function init() {
    }

    function play() {
        var n = parseInt(Math.random()*(23-0+1) + 0);

        if (img1.className == 'visibility_h revealTrans') {
            img2.className = 'visibility_h revealTrans'
            img1.filters.item(0).apply();
            img1.className = 'visibility_s revealTrans'
            img1.filters.item(0).transition = n;
            img1.filters.item(0).play();
        } else {
            img1.className = 'visibility_h revealTrans'

            img2.filters.item(0).apply();

            if (img2.className == 'visibility_h revealTrans') {
                img2.className = 'visibility_s revealTrans'
            } else {
                img2.className = 'visibility_h revealTrans'
            }

            img2.filters.item(0).transition = n;
            img2.filters.item(0).play();
        }

        window.setTimeout("play();", 3000 );
    }
</script>
</HEAD>

<BODY οnlοad="init();">
    <TABLE>
    <TR align="center">
        <TD width='464px' height='277px'><div id="divparent" class='revealTrans'>
            <div id="div1" class="display_h"><IMG id="img1" SRC="images/33-1.gif" class="visibility_s revealTrans"></IMG></div>
            <div id="div2" class="display_s"><IMG id="img2" SRC="images/Tabbuttonbg.gif" class="visibility_h revealTrans"></IMG></div>
            </div>
        </TD>
        <TD></TD>
    </TR>
    </TABLE>
</BODY>
</HTML>
<script>
    play();
</script>

如果你想试验一下，记得找两幅图片，并修改一下上面的代码，不多说了，试一下就知道了，效果还不错。
本人CSS和javascript还是初学，如果有可以改进的地方，希望大家不吝赐教，谢谢，期望与您的交流。

firefly-cn

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用CSS实现图片渐显的效果

今天读到一篇关于用CSS实现渐显效果的文章，觉得很有意思，想试一试，但是没有给具体的实现例子，从网上也找了些资料，实现方法各不相同，我自己也实现了一个可以定时渐显的例子，拿出来与大家共享，下面是html文件的源码： New Document .visibility_s{diplay:block;width:464px;height:277px;visibility:visible;}
复制链接

扫一扫