<!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. 自动化测试之python安装

    1.首先访问http://www.python.org/download/去下载最新的python版本. 2.安装下载包,一路next. 3.为计算机添加安装目录搭到环境变量,如图把python的安装 ...

  2. sql语句中能有中文 空格

    EXEC dbo.usp_execute_sql_Prod 'SELECT * FROM dbo.QuanVerify_Log where ticketcode = ''3783665132'' ' ...

  3. BZOJ 2115 Xor（抑或值最大路径）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2115 题意:给出一个带权无向图.求一条1到n的路径使得路径上权值的抑或值最大? 思路:( ...

  4. Python 数据类型转换

    Python提供的基本数据类型主要有:布尔类型.整型.浮点型.字符串.列表.元组.集合.字典.日期等等 函数                      描述     type(x)  x的数据类型   ...

  5. 无法创建链接服务器 "(null)" 的 OLE DB 访问接口 "Microsoft.Ace.OLEDB.12.0" 的实例。

    --开启导入功能    exec sp_configure 'show advanced options',1    reconfigure    exec sp_configure 'Ad Hoc  ...

  6. 导出到Excel并且取消默认的科学计算法

    导出Excel的代码很多,其中这种最简单: protected void btnDCAll_Click(object sender, EventArgs e)        {            ...

  7. 瞎折腾之 VS2013 Cordova项目的创建与配置

    扯淡 什么是Cordova ? 网上查询的说明: Cordova是贡献给Apache后的开源项目,是从PhoneGap中抽出的核心代码,是驱动PhoneGap的核心引擎.你可以把他想象成类似于Webk ...

  8. UVa 409 Excuses, Excuses!

    哈哈,虽然是一道字符串水题,可是拿到一个1A还是很开心的! 题意就是给一些keywords(子串)和Excuse(母串),然后输出包含keywords最多的Excuse,如果相等的话,按任意顺序全部输 ...

  9. HDU 3496 (二维费用的01背包) Watch The Movie

    多多想看N个动画片,她对这些动画片有不同喜欢程度,而且播放时长也不同 她的舅舅只能给她买其中M个(不多不少恰好M个),问在限定时间内观看动画片,她能得到的最大价值是多少 如果她不能在限定时间内看完买回 ...

  10. A1486. 树（王康宁）

    题目:http://www.tsinsen.com/A1486 题解: 其实看到和路径有关的就应该想到点分治. 我们找出重心之后遍历每一棵子树得到它的 { x=经过特殊点的个数,y=到rt的异或和} ...