<html>

<head>

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

</head>

<style>

*{margin:0;padding:0;}

#w{width:200px;height:200px;background:#ccc;overflow:hidden;position:relative;left:0px;}

#w1{width:400px;height:200px;}

</style>

<script>

window.onload=function(){

    var oDiv=document.getElementById("w");

    var oDiv1=document.getElementById("w1");

    var oIput=document.getElementById("btn");

    var oTxt=document.getElementById("txt");

    var speed=0;

    var timer=null;//timer=setInterval(sMove,1000);

    /*减速运动*/

    function mMove(target){

        speed=(target-oDiv.offsetLeft)/8;

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

        if(oDiv.offsetLeft==target){

            clearInterval(timer);

            console.log("计时器停止"+speed);

        }else{

            oDiv.style.left=oDiv.offsetLeft+speed+"px";

            console.log("speed="+speed);

            console.log("oDiv.offsetLeft="+oDiv.offsetLeft);

        }

    }

    oIput.onclick=function(){

        timer=setInterval(function(){mMove(oTxt.value)},100);

    };

};

</script>

<body>

<input type="button" value="button" id="btn" />

<input  type="text" id="txt" />

<div id="w">

    <div id="w1"></div>

</div>

</body>

</html>

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

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

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

  2. JS实现缓存运动

                                                                                                      JS ...

  3. tween.js缓动（补间动画）

    一.理解tween.js 如果看到上面的已经理解了,可以跳过下面的部分.下面为对Tween.js的解释 下面就介绍如何使用这个Tween了,首先b.c.d三个参数(即初始值,变化量,持续时间)在缓动开 ...

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

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

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

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

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

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

  7. JS学习-基础运动

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

  8. JS——缓动框架的问题

    1.opacity问题:IE678支持filter: alpha(opacity=50)取值1-100:小数位容易精度丢失,所i有统一json字符串设置为百进制,赋值时除以100 2.zIndex问题 ...

  9. 将css和js缓存到localStorage缓存，提高网页响应速度

    适用于小站点,这很极致,很快速~~ /** * Created by SevenNight on 2016/9/21 0021. * 插件功能:使用localStorage缓存js和css文件,减少h ...

随机推荐

  1. Future 模式介绍

    假设一个任务执行需要花费一些时间,为了省去不必要的等待时间,可以先获取一个提货单,即future,然后继续处理别的任务,知道货物到达,即任务完成得到结果,此时可以使用提货单提货,即通过future得到 ...

  2. 使用Join代替In

    我们知道,在sql中使用IN让我们的where子句可以规定多个值.当需要从一个集合中查询包含某几个值的记录的时候,通常我们会选择使用IN来实现,其实,使用JOIN也可以实现这样的功能,而且性能要比IN ...

  3. 安装apache+php+mysql

    #yum -y install httpd   安装完成之后查看安装时生成了哪些文件: #rpm -ql httpd   绑定域名(如果没有域名可以跳过): #cd /etc/httpd/conf.d ...

  4. cf731E

    题意:一个游戏,由n张贴纸组成.贴纸排成一排,并且纸条上标有数字,玩家轮流揭下m张从左到右连续的纸条(m大等2),揭下后玩家得分累加这些纸条的sum,并且在剩下纸条最左边贴上新的纸条,数值为揭下纸条的 ...

  5. js克隆

    一.有什么用 不破坏原对象的属性 引入一些概念~ 原始数据类型(5种):undefined.null.number.string.boolean 引用数据类型(1种,也叫复合数据类型):object ...

  6. 数组越界保护与消息传递black机制

    数组越界保护if(index.row <= [array count]) 发送消息[[NSNotificationCenter defaultCenter]     postNotificati ...

  7. Problem C HDU 5224

    Description There is a piece of paper in front of Tom, its length and width are integer. Tom knows t ...

  8. PL/SQL : Procedural Language / Structual Query Language and it is an exrension to SQL.

    SQL is not very flexible and it cannot be made to react differently to differing sutuations easily. ...

  9. HTML参考

    HTML Basic Document <html> <head> <title>Document name goes here</title> < ...

  10. VMware-workstation-full-10.0.1-1379776 CN

    从V10版本开始,VMware Workstation 官方自带简体中文了,以后大家不需要汉化啦! 今天,VMware Workstation 10.0.1正式发布,版本号为Build 1379776 ...