• 弹性运动


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
        #div1{ 100px; height: 100px; background: red; position: absolute; top: 50px; left: 0px;}
        </style>
        <script type="text/javascript">
                var iSpeed=0;
                var timer=null;
                var left=0;
                function startMove(obj,iTarget){

                    clearInterval(obj.timer);
                    obj.timer=setInterval(function(){
                        /*
                        if(oDiv.offsetLeft<300){
                            iSpeed+=(300-oDiv.offsetLeft)/50;
                        }else {
                            iSpeed-=(oDiv.offsetLeft-300)/50;
                        }*/
                        //因为if里边的判断可以化简,所有为
                        iSpeed+=(iTarget-obj.offsetLeft)/5;
                        iSpeed*=0.7; //乘以小数,让时间慢慢变小

                        left+=iSpeed; //引入一个外部变量将误差每次累计起来

                        if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){ //当速度的绝对值小于1 并且 边距和目标的差小于1时 就停止
                            clearInterval(obj.timer);
                            obj.style.left=iTarget+'px'; //停止定时器 并手动移动到指定的位置
                        }else{
                            obj.style.left=left+'px';                        
                        }
                        
                    
                    },30);
                };

        </script>
    </head>
    <body>
        <input type="button" value="开始运动" onclick="startMove(document.getElementById('div1'),'300')" />
        <div id="div1"></div>
        <div style="position: absolute; 1px; height: 300px; left: 300px; top:0; background: black;"></div>
    </body>
    </html>

  • 相关阅读:
    WebClient与WebRequest差异
    自定义控件的构建(4)
    自定义控件的构建(6)
    Sliverlight中PagedCollectionView的总结
    自定义控件的构建(13)
    自定义控件的构建(8)
    Silverlight中的主题设置
    自定义控件的构建(12)
    自定义控件的构建(7)
    谈谈学完Asp.net 中的自定义控件后的感受
  • 原文地址:https://www.cnblogs.com/qibingshen/p/5281572.html
Copyright © 2020-2023  润新知