zoukankan      html  css  js  c++  java
  • js 弹性运动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>弹性运动</title>
        <style>
            #div1
            {
                width:100px;
                height:100px;
                background:red;
                position:absolute;
            }
        </style>
        
        <script type="text/javascript">
            window.onload = function(){
                var oBtn = document.getElementById("btn");
                
                var oDiv = document.getElementById("div1");
                
                oBtn.onclick = function(){
                   move2(oDiv,300);
                }
            
            }
            
            
            var timer = null;
            var speed = 0;
            
            function move(){
                
                clearInterval(timer);
                timer = setInterval(function(){
                    var oDiv = document.getElementById("div1");
                    
                    speed+=(300-oDiv.offsetLeft)/5;
                    
                    speed*= 0.7;
                    
                    oDiv.style.left = oDiv.offsetLeft + speed +'px';
                    
                    
                },30);
            }
            
            var iSpeed = 0;
            function move2(obj,target)
            {
                clearInterval(obj.timer);
                obj.timer = setInterval(function(){
                    
                    iSpeed +=(target-obj.offsetLeft)/5;
                    iSpeed *=0.7;
                    
                    if(Math.abs(iSpeed)<1 && Math.abs(target-obj.offsetLeft)<1)
                    {
                        clearInterval(obj.timer);
                    }
                    else
                    {
                        obj.style.left = obj.offsetLeft + iSpeed +'px';
                    }
                },30);
            }
        </script>
    </head>
    <body>
       <input type="button" id="btn" value="运动" />
       <div id="div1">
        </div>
        
        <div style="1px;height:300px;background:black;top:0px;left:300px;position:absolute;"></div>
    
    </body>
    </html>
  • 相关阅读:
    翻转数组
    C语言之指针
    C语言之结构体
    C语言之函数
    数据结构之typedef
    数据结构之树
    数据结构之链表
    数据结构之队列
    数据结构之数组
    ssh远程连接控制 linux 口令、密钥连接
  • 原文地址:https://www.cnblogs.com/zoro-zero/p/4341793.html
Copyright © 2011-2022 走看看