js实现图片的淡入淡出

时间：2022-06-18 05:37:47

思想：

其实是运动的一种，就是当鼠标移入div中时，将div的透明度变大，

当鼠标移动出来的时候透明度变回原来。

你可以尝试写一下，不会再看看代码

<style>

    #div1{

        width:200px;height:200px;

        background:red; filter:alpha(opacity:30);opacity:0.3;

        margin:0 auto;

    }

</style>

<body>

<div id="div1">

</div>

</body>

记住透明度有兼容性问题，

js代码如下　

<script>

window.onload=function()

{

    var div1=document.getElementById('div1');

    div1.onmouseover=function()

    {

        startMove(100);

    };

    div1.onmouseout=function()

    {

        startMove(30);

    };

};

    var alpha=30;

    var timer=null;

    function startMove(it)

    {

        var div1=document.getElementById('div1');

        clearInterval(timer);

        timer=setInterval(function()

            {

                var speed=0;    //定义运动的速度

                if (alpha<it)

                {

                    speed=5;

                }

                else

                {

                    speed=-5;

                }

                if (alpha==it)  //若传入的的透明度等于本来的透明度就清除定时器

                {

                    clearInterval(timer);

                }

                else

                {

                    alpha=alpha+speed;

                    div1.style.filter='alpha(opacity:"+alpha+")';

                    div1.style.opacity=alpha/100;

                }

            },30)

    }

</script>

　　

js代码比较简单，不详细解释了，

相关文章