zoukankan      html  css  js  c++  java
  • 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代码比较简单,不详细解释了,

  • 相关阅读:
    Hibernate个人学习笔记(1)
    wangzhi
    星星评分
    关于jquery中jQuery slideToggle() 方法实现的原理
    css盒模型和块级、行内元素深入理解display:in
    html 界面跳转
    wxgz平台开发
    关于Apache PHP实现无后缀名 URL重写
    读书笔记
    比较好的书本
  • 原文地址:https://www.cnblogs.com/biyongyao/p/5847513.html
Copyright © 2011-2022 走看看