<!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. SGU 385 Highlander（期望）

    题目链接:http://acm.sgu.ru/problem.php?contest=0&problem=385 题意: 思路: double f[N][N][N],g[N][N],A[N][ ...

  2. Java中的private、protected、public和default的区别

        (1)对于public修饰符,它具有最大的访问权限,可以访问任何一个在CLASSPATH下的类.接口.异常等.它往往用于对外的情况,也就是对象或类对外的一种接口的形式. (2)对于protec ...

  3. bzoj1564: [NOI2009]二叉查找树

    dp. 首先这棵树是一个treap. 权值我们可以改成任意实数,所以权值只表示相互之间的大小关系,可以离散化. 树的中序遍历是肯定确定的. 用f[l][r][w]表示中序遍历为l到r,根的权值必须大于 ...

  4. UVa 12174 (滑动窗口) Shuffle

    首先预处理一下以每个数为结尾的前s个数是否能构成一个1~s的排列. 可以用cnt数组来记录每个数出现的次数和用一个变量记录一共有多少个不同的数出现. 然后枚举每种可能的情况,也就是枚举第一首歌会出现的 ...

  5. BZOJ 1984 月下“毛景树”

    我觉得我要把BZOJ上的链剖写完了吧.... #include<iostream> #include<cstdio> #include<cstring> #incl ...

  6. 机器学习（二）——K-均值聚类（K-means）算法

    最近在看<机器学习实战>这本书,因为自己本身很想深入的了解机器学习算法,加之想学python,就在朋友的推荐之下选择了这本书进行学习,在写这篇文章之前对FCM有过一定的了解,所以对K均值算 ...

  7. PrintWriter的println问题

    今天发现一个奇怪的问题,同样的代码web server部署在windows自测机器上跟linux服务器上, 在通信上出现了不一样的换行结束符. Debug发现通过PrintWriter的println ...

  8. Java核心技术II读书笔记（二）

    ch2 XML 有两种XML文档结构,DTD和Schema,用解释文档构成规则,这些规则指定了每个元素俺的合法子元素和属性. DTD DTD有多种提供方式,可以像下面这样加到XML中: <?xm ...

  9. linux内核值shmmax问题

    问题:(rac安装过程中grid检测)  Please run the following script on each node as "root" user to execut ...

  10. openlayers加载地图没有图片时有红叉的解决方法

    解决方式:设置样式隐藏图片 <style type="text/css"> .olImageLoadError { /*ol2.12 onImageLoadError ...