js实现图片的淡入淡出

思想：

其实是运动的一种，就是当鼠标移入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代码比较简单，不详细解释了，

posted @ 2016-09-06 22:54  MrPat  阅读(2728)  评论(0)  编辑  收藏  举报