<!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. hdu - 1728逃离迷宫 && hdu - 1175 连连看 (普通bfs)

    http://acm.hdu.edu.cn/showproblem.php?pid=1728 这两道题花了一下午的时候调试,因为以前做过类似的题,但是判断方向的方法是错的,一直没发现啊,真无语. 每个 ...

  2. LBS由ip查经纬度

    LBS API: https://api.map.baidu.com/highacciploc/v1?qcip=223.104.5.201&qterm=pc&ak=NLwCqrDce4 ...

  3. You can't specify target table 'charge' for update in FROM clause

    mysql中不能这么用. (等待mysql升级吧)错误提示就是说,不能先select出同一表中的某些值,再update这个表(在同一语句中) 替 换方 案: create table tmp as s ...

  4. Scrum Agile

    Scrum Agile 迭代式增量软件开发,敏捷开发,源于丰田汽车的制造流程. HMC测试流程: 1.hmc改配置 2.上ui验证 3.还原hmm(有的需要,有的不需要) 4.addReferal,在 ...

  5. JS改变input的value值不触发onchange事件解决方案 （转）

    方法(一)(转载的网络资料) 需要了解的知识     首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onprope ...

  6. HDU 5326 work （回溯，树）

    题意:给一棵树,每个结点的子树下的结点都是它的统治对象,问有多少个统治对象数目为k的结点? 思路:每个结点都设一个cnt来记数,只要将每个结点往上回溯,直到树根,经过的每个结点都将计数器加1.最后再扫 ...

  7. mysql mac启动

    设置别名 alias mysql=/usr/local/mysql/bin/mysql alias mysqladmin=/usr/local/mysql/bin/mysqladmin 修改密码 su ...

  8. 【自动化测试】关于UI自动化的疑问（记录ing）

    1. 数据变动问题导致业务需要增加新的逻辑,这是增加case的健壮性还是浪费时间? 2. 如何做好PO? 不断数据抽离不断优化方法? 3. 如何提高调试代码的效率? /web可以 4. 主管不理解自动 ...

  9. Java中sychronized方法与sychronized块区别

    一.举几个栗子

  10. 在ACCESS中创建数据库和查询(ACCESS 2000)

    备份还原数据库 备份.还原 —— 复制\粘贴 压缩修复数据库命令 —— 复制该文件并重新组织,并重新组织文件在磁盘上的储存方式.压缩同时优化了Access数据库的性能.(工具——实用数据库工具或者工具 ...