图片交替渐变出现的效果实现

最新推荐文章于 2021-05-30 19:21:03 发布

原创最新推荐文章于 2021-05-30 19:21:03 发布 · 524 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#游戏 #c/c++ #python

前台&美工专栏收录该内容

118 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的网页图片切换效果。通过修改图片的z-index和透明度，实现了两张图片之间的平滑过渡。利用setTimeout函数控制动画的定时触发，达到循环播放的效果。

[url]http://my.oschina.net/HeYuhui/blog/632467[/url]

function change2(){
    document.getElementById("img2").style.zIndex='2';
    document.getElementById("img1").style.zIndex='1';
    document.getElementById("img1").style.opacity='1';
    $("#img2").animate({opacity:'0'},2000);
        }
function change3(){
    document.getElementById("img1").style.zIndex='2';
    document.getElementById("img2").style.zIndex='1';
    $("#img1").animate({opacity:'0'},2000);
    document.getElementById("img2").style.opacity='1';
        }
function change4(){
            setTimeout("change2()",5000);
            setTimeout("change3()",12000);
            setTimeout("change4()",14000);
        }