码迷,mamicode.com
首页 > Web开发 > 详细

js实现图片的淡入淡出

时间:2016-09-07 01:24:26      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:

思想:

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

js实现图片的淡入淡出

标签:

原文地址:http://www.cnblogs.com/biyongyao/p/5847513.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!