<!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);

        }

        function ToMove(obj,goal)

        {

            clearInterval(obj.timer);

            obj.timer = setInterval(function(){

                var icur = obj.offsetLeft;

                if(icur >= goal)

                {

                    clearInterval(obj.timer);

                }

                else

                {

                    var speed = (goal - obj.offsetLeft) / 8;

                    speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);

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

                }

            },50);

        }

    }

    </script>

    <body>

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

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

    </body>

</HTML>

js运动 缓冲运动的更多相关文章

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

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

  2. javascript运动系列第五篇——缓冲运动和弹性运动

    × 目录 [1]缓冲运动 [2]弹性运动 [3]距离分析[4]步长分析[5]弹性过界[6]弹性菜单[7]弹性拖拽 前面的话 缓冲运动指的是减速运动,减速到0的时候,元素正好停在目标点.而弹性运动同样是 ...

  3. js缓冲运动

    缓冲运动 现象:逐渐变慢,最后停止 原理:距离越远,速度越大 速度的计算方式: 1,速度由距离决定 2,速度＝(目标值-当前值)/缩放系数 说明:速度为正负数时,也决定了物体移动的方向 示例:div缓 ...

  4. js 运动函数篇 (一) （匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动）层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...

  5. JS缓冲运动案例：右侧居中悬浮窗

    JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...

  6. JS缓冲运动案例：右下角悬浮窗

    JS缓冲运动案例:右下角悬浮窗 红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留. <!DOCTYPE html> <html lang=&quo ...

  7. JS缓冲运动案例

    点击"向右"按钮,红色的#red区块开始向右缓冲运动,抵达到黑色竖线位置自动停止,再次点击"向右"#red区块也不会再运动.点击"向左"按钮 ...

  8. js动画之缓冲运动

    缓冲运动就是运动的速度与时间或者距离有关联,不是一般的匀速运动 <!DOCTYPE html> <html lang="en"> <head> ...

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

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

随机推荐

  1. BZOJ 1257 余数之和sum

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1257 题意:计算sigama(m%i)(1<=i<=n). 思路: 这样就简 ...

  2. SPOJ 1739 Yet Another Equation（Pell方程）

    题目链接:http://www.spoj.com/problems/EQU2/ 题意:给出方程x^2-n*y^2=1的最小整数解. 思路:参见金斌大牛的论文<欧几里得算法的应用>. imp ...

  3. [HIHO]hihoCoder太阁最新面经算法竞赛7

    题目链接:http://hihocoder.com/contest/hihointerview12 期末完事了,终于有时间成套刷题了.这套题比较简单,难度上感觉和上一套差不多.除了最后一个题是看了讨论 ...

  4. Git基础(三)

    本章 就开始和大家一起学习第三块内容:远程仓储的使用操作.要参与任何一个 Git 项目的协作,必须要了解该如何管理远程仓库.远程仓库是指托管在网络上的项目仓库,可能会有好多个,其中有些你只能读,另外有 ...

  5. C#判断字符串为空的几种方法和效率判断

    C#判断字符串为空的几种方法和效率判断 string定义 1.1 string str1="":会定义指针(栈),并在内存里划一块值为空的存储空间(堆),指针指向这个空间.1.2 ...

  6. UVa 11014 (莫比乌斯反演) Make a Crystal

    这个题是根据某个二维平面的题改编过来的. 首先把问题转化一下, 就是你站在原点(0, 0, 0)能看到多少格点. 答案分为三个部分: 八个象限里的格点,即 gcd(x, y, z) = 1,且xyz均 ...

  7. PHP全栈工程师学习大纲

    一.高性能网站开发功力提升 时间 标题 内容概要 2015-12-28 开学典礼以及工程师成长路线图 工程师成长的发展路径图.三个阶段,在各个阶段需要提升自己的地方,从技术上也讲了一些提高分析代码的工 ...

  8. WEBUS2.0 In Action - 搜索操作指南 - (4)

    上一篇:WEBUS2.0 In Action - 搜索操作指南(3) 6. 搜索多个索引 为了提升性能, 我们可以从多个索引同时进行搜索, Webus.Search.MultiSearcher提供了相 ...

  9. simplefactory简单工厂模式

    简单工厂模式概述    又叫静态工厂方法模式,它定义一个具体的工厂类负责一些类的实例 优点    客户端不需要在负责对象的创建,从而明确了各个类的职责 缺点:    这个静态工厂类负责所有对象的创建, ...

  10. 添加第三方类库造成的linker command failed with exit code 1 (use -v to see invocation)的错误调试

    linker command failed with exit code 1 (use -v to see invocation)这个错误貌似遇见并不止一次,当我想用某个第三方类库的时候(如SBJso ...