zoukankan      html  css  js  c++  java
  • JS-运动基础(一)续

    2.淡入淡出的图片

       用变量存储透明度

    <title>无标题文档</title>
    <style>
    #div1{width:293px; height:220px; background:url('images/05.jpg');filter:alpha(opacity:30);opacity:0.3;}
    </style>
    <script>
    window.onload=function ()
    {
        var oDiv=document.getElementById('div1');
        oDiv.onmouseover=function ()
        {
            startMove(100);
        }
        oDiv.onmouseout=function ()
        {
            startMove(30);
        }
    }
    var alpha=30;
    var timer=null;
        
    function startMove(iTarget)
    {
        var oDiv=document.getElementById('div1');
            
        clearInterval(timer);
        timer=setInterval(function (){
                            var speed=0;
                            if(alpha<iTarget)
                            {
                                speed=10;
                            }
                            else
                            {
                                speed=-10;
                            }
                                
                            if(alpha==iTarget)
                            {
                                clearInterval(timer);
                            }
                            else
                            {
                                alpha+=speed;
                                    
                                oDiv.style.filter='alpha(opacity:'+alpha+')';
                                oDiv.style.opacity=alpha/100;
                            }
                        },30);
    }
    </script>
    </head>
    
    <body>
    <div id="div1"></div>
    </body>

    DOM操作应用知识补充

    表单事件

    onsubmit    提交时发生

    onreset      重置时发生

    表单内容验证

    阻止用户输入非法字符     阻止事件

    输入时、失去焦点时验证     onkeyup 、onblur

    提交时检查     onsubmit

    *后台数据检查

  • 相关阅读:
    35-高级特性之iterable与iterator
    33-高级特性之generator(1)
    34-高级特性之generator(2)
    32-高级特性之类装饰器
    什么是Autolayout
    屏幕适配
    NSTimer
    分页
    UIScrollView的缩放原理
    设置图片圆角
  • 原文地址:https://www.cnblogs.com/919czzl/p/4320024.html
Copyright © 2011-2022 走看看