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代碼比較簡單,不詳細解釋了,


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM