• js实现图片的淡入淡出


    思想:

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

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

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

    <style>
        #div1{
            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代码比较简单,不详细解释了,

  • 相关阅读:
    深入Python(一)
    深入Python(二)
    初识Python(五)
    初识Python(一)
    深入Python(三)
    一、MongoDB的下载、安装与部署
    浏览器上的javascript
    javascript中的事件
    扩展方法
    团队项目开题报告
  • 原文地址:https://www.cnblogs.com/biyongyao/p/5847513.html
Copyright © 2020-2023  润新知