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

    <title>无标题文档</title>
    <style>
    #div1{width:200px;height:200px; background:red; position:absolute; left:0px; top:50px;}
    </style>
    <script>
    var timer=null;
    function startMove()
    {
        var oDiv=document.getElementById('div1');
        clearInterval(timer);   //为避免同时开启多个定时器
        timer=setInterval(function (){
                                    var speed=10;
                                    if(oDiv.offsetLeft>300)
                                    {
                                        clearInterval(timer);
                                    }
                                    else   //if...else避免在到达终点位置后按开始按钮再次执行else里面的语句而使物体运动
                                    {
                                        oDiv.style.left=oDiv.offsetLeft+speed+'px';
                                    }
                },30);
    }
    </script>
    </head>
    
    <body>
    <input id="btn1" type="button" value="开始运动" onclick="startMove()"/>
    <div id="div1">
    </div>
    </body>

    运动框架及应用

    运动框架

      1.在开始运动时,关闭已有定时器

      2.把运动和停止隔开(if/else)

    运动框架实例分享

    1.”分享到“侧边栏

        通过目标点,计算速度值

    <title>无标题文档</title>
    <style>
    #div1{width:150px; height:200px; background:green; position:absolute; left:-150px;}
    #div1 span{position:absolute; width:20px; height:60px; line-height:20px; background:blue; right:-20px;top:70px;}
    </style>
    <script>
    window.onload=function ()
    {
        var oDiv=document.getElementById('div1');
        oDiv.onmouseover=function ()
        {
            startMove();
        }
        oDiv.onmouseout=function ()
        {
            startMove2();
        }
    };
    var timer=null;
    
    function startMove()
    {
        var oDiv=document.getElementById('div1');
        
        clearInterval(timer);
        timer=setInterval(function (){
                                    if(oDiv.offsetLeft==0)
                                    {
                                        clearInterval(timer);
                                    }
                                    else
                                    {
                                        oDiv.style.left=oDiv.offsetLeft+10+'px';
                                    }
                        },30);
    }
    function startMove2()
    {
        var oDiv=document.getElementById('div1');
        
        clearInterval(timer);
        timer=setInterval(function (){
                                    if(oDiv.offsetLeft==-150)
                                    {
                                        clearInterval(timer);
                                    }
                                    else
                                    {
                                        oDiv.style.left=oDiv.offsetLeft-10+'px';
                                    }
                        },30);
    }
    </script>
    </head>
    
    <body>
    <div id="div1">
         <span>分享到</span>
    </div>
    </body>

    改进1

    window.onload=function ()
    {
        var oDiv=document.getElementById('div1');
        oDiv.onmouseover=function ()
        {
            startMove(10,0);
        }
        oDiv.onmouseout=function ()
        {
            startMove(-10,-150);
        }
    };
    var timer=null;
    
    function startMove(speed,iTarget)
    {
        var oDiv=document.getElementById('div1');
        
        clearInterval(timer);
        timer=setInterval(function (){
                                    if(oDiv.offsetLeft==iTarget)
                                    {
                                        clearInterval(timer);
                                    }
                                    else
                                    {
                                        oDiv.style.left=oDiv.offsetLeft+speed+'px';
                                    }
                        },30);
    }
    
    </script>

    改进2

    window.onload=function ()
    {
        var oDiv=document.getElementById('div1');
        oDiv.onmouseover=function ()
        {
            startMove(0);
        }
        oDiv.onmouseout=function ()
        {
            startMove(-150);
        }
    };
    var timer=null;
    
    function startMove(iTarget)
    {
        var oDiv=document.getElementById('div1');
        
        clearInterval(timer);
        timer=setInterval(function (){
                                    var speed=0;
                                    
                                    if(oDiv.offsetLeft>iTarget)
                                    {
                                        speed=-10;
                                    }
                                    else
                                    {
                                        speed=10;
                                    }
                                    
                                    if(oDiv.offsetLeft==iTarget)
                                    {
                                        clearInterval(timer);
                                    }
                                    else
                                    {
                                        oDiv.style.left=oDiv.offsetLeft+speed+'px';
                                    }
                        },30);
    }
    
    </script>

  • 相关阅读:
    C#委托、事件、消息(入门级)
    WinForm编程数据视图之DataGridView浅析(续)
    WinForm编程数据视图之DataGridView浅析
    在Java窗体表格中插入复选框
    单向链表(单链表)的Java实现
    C#委托、事件、消息(入门级)(续)
    Windows7操作系统自定义运行命令(简单方法之一)
    Unity的外部配置文件使用方法
    aspnet_regsql如何给sqlexpress添加aspnetdb
    联想Y530改装XP经验
  • 原文地址:https://www.cnblogs.com/919czzl/p/4320012.html
Copyright © 2011-2022 走看看