js实现图片的淡入淡出

最新推荐文章于 2021-06-16 19:00:34 发布

weixin_30947043

最新推荐文章于 2021-06-16 19:00:34 发布

阅读量148

点赞数

原文链接：http://www.cnblogs.com/biyongyao/p/5847513.html

版权

思想：

其实是运动的一种，就是当鼠标移入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.οnlοad=function()
{
    var div1=document.getElementById('div1');
    div1.οnmοuseοver=function()
    {
        startMove(100);
    };
    div1.οnmοuseοut=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代码比较简单，不详细解释了，

转载于:https://www.cnblogs.com/biyongyao/p/5847513.html

weixin_30947043

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现图片的淡入淡出

思想：其实是运动的一种，就是当鼠标移入div中时，将div的透明度变大，当鼠标移动出来的时候透明度变回原来。你可以尝试写一下，不会再看看代码<style> #div1{ width:200px;height:200px; background:red; filter:alpha(opacity:30);opac...
复制链接

扫一扫