<!DOCTYPE HTML>

<HTML>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title></title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        #div1{

            height:100px;

            width: 100px;

            background: red;

            position:absolute;

            margin-left: 5px;

        }

    </style>

    <script>

    window.onload = function ()

    {

        var odiv = document.getElementById('div1');

        var oinput = document.getElementsByTagName('input')[0];

        oinput.onclick = function ()

        {

            ToMove(odiv,500,50);

        }

        function ToMove(obj,goal,speed)

        {

            clearInterval(obj.timer);

            obj.timer = setInterval(function(){

                var icur = obj.offsetLeft;

                if(icur >= goal)

                {

                    clearInterval(obj.timer);

                }

                else

                {

                    speed *= 0.9;

                    obj.style.left = obj.offsetLeft + speed + 'px';

                }

            },50);

        }

    }

    </script>

    <body>

        <input type="button" value = "提交">

        <div id="div1"></div>

    </body>

</HTML>

js运动 摩擦运动的更多相关文章

  1. JS运动基础(二) 摩擦运动、缓冲运动

    摩擦运动: 逐渐变慢,最后停止 缓冲运动: 与摩擦力的区别:可以精确的停到指定目标点距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数Bug:速度取整值取整: iSpeed = iSpe ...

  2. js动画 Css提供的运动 js提供的运动

    1.     动画 (1)      Css样式提供了运动 过渡的属性transition  从一种情况到另一种情况叫过渡 Transition:attr  time  linear  delay: ...

  3. JS学习-基础运动

    多物体运动 多个物体用同一个函数时,函数里定义的定时器应该要每个物体对应一个定时器名称,不然会导致未完成运动就被关闭了,因为定时器名称一样,而开启定时器前会清除一下. obj.timer 多值同时运动 ...

  4. JS实现缓存运动

                                                                                                      JS ...

  5. js入门学习~ 运动应用小例

    要实现的效果如下: 鼠标移入各个小方块,实现对应的效果(变宽,变高,移入透明,移出恢复)~~ (且各运动相互之前不干扰)  主要是练习多个物体的运动框架~~ --------------------- ...

  6. js实现缓冲运动，和匀速运动有点不相同

    缓冲运动和匀速运动有点不同,看图可以知道缓冲运动速度是越来越慢的. <style> *{ padding:0; margin:10px 0; } #div1{ height:100px; ...

  7. JS之链式运动，及任意值运动框架，包括透明度的改变

    链式运动,顾名思义,一环扣一环,即执行完一个事件后,再接着执行下一个事件,在参数上面动手脚,将下一个要执行的函数名作为一个参数,即利用到回掉函数,下面代码中出现的fn,即回掉函数, function ...

  8. js运动 多数据运动 含JSON

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  9. JS 之完美运动框架

    完美运动框架是对原来的任意值运动框架的改善和效率的提升,即利用了json对属性进行封装,从而提高效率: window.onload=function(){ var oDiv=document.getE ...

随机推荐

  1. ORA-12154 终极解决办法

    PLSQL连接Oracle数据库总出现12514分2中情况: 1.无法解析指定的连接标识符: 解决办法:我的电脑---属性---高级---环境变量   删除Path变量中C:\oracle\produ ...

  2. Nginx安全配置

    nginx本身不能处理PHP,它只是个web服务器,当接收到请求后,如果是php请求,则发给php解释器处理,并把结果返回给客户端.nginx一般是把请求发fastcgi管理进程处理,fastcgi管 ...

  3. 内核打上yaffs2补丁遇到的问题

    移植yaffs2文件系统时,首先要在内核中添加对yaffs2的支持,使用命令:./patch-ker.sh c 内核目录时,出现下面错误: usage:  ./patch-ker.sh  c/l m/ ...

  4. HDU 5371 Hotaru's problem （Manacher，回文串）

    题意:给一个序列,找出1个连续子序列,将其平分成前,中,后等长的3段子序列,要求[前]和[中]是回文,[中]和[后]是回文.求3段最长为多少?由于平分的关系,所以答案应该是3的倍数. 思路:先Mana ...

  5. HDU 5335 Walk Out (BFS，技巧)

    题意:有一个n*m的矩阵,每个格子中有一个数字,或为0,或为1.有个人要从(1,1)到达(n,m),要求所走过的格子中的数字按先后顺序串起来后,用二进制的判断大小方法,让这个数字最小.前缀0不需要输出 ...

  6. php字符串与正则表达式试题 Zend权威认证试题讲解

    字符串是PHP的“瑞士军刀”——作为一种Web开发语言,PHP最常打交道的就是字符串.因此对于开发者来说,处理字符串是一项非常基础的技能.幸运的是,由于PHP开发团队的努力,PHP对字符串的处理相当易 ...

  7. 20160128.CCPP体系详解(0007天)

    以下内容有所摘取,进行了某些整理和补充 论浮点数的存储原理:float浮点数与double浮点数的二进制存储原理–>阶码 浮点数转二进制 1.整数int类型和浮点数float类型都是占用4个字节 ...

  8. (四)Logistic Regression

    1 线性回归 回归就是对已知公式的未知参数进行估计.线性回归就是对于多维空间中的样本点,用特征的线性组合去拟合空间中点的分布和轨迹,比如已知公式是y=a∗x+b,未知参数是a和b,利用多真实的(x,y ...

  9. textfield tips

    关于autoSize和align属性比较好的解释,摘录下. autoSize deals with expanding the bounds of the TextField to ensure al ...

  10. 剖析OkHttp缓存机制

    现在应用市场上的 App 无一不需要网络操作,这些应用的开发者大多数都选择结合使用 OkHttp 和 Retrofit 来完成网络操作.okHttp 最为人称道的一个特性就是它的缓存机制,而我将在本篇 ...