<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. 一步一步配置NLB

    废话不说,配置NLB需要准备以下环境: 1. 至少两个服务器,我的是windows server 2008 R2; 我的两个服务器名分别为NLB3和NLB2,其中NLB3是主,为什么呢?后面会谈到,在 ...

  2. spring mvc上传图片

    1.需要commons-fileupload.jar commons-io.jar 2.需要在springmvc.xml中 配置存放静态资源的路径,对图片等静态资源放行 <mvc:resourc ...

  3. hduacm 3183 rmq

    http://acm.hdu.edu.cn/showproblem.php?pid=3183 问题等价与取N-M个数,每次取的时候保证后面能取的个数足够,并且取的数最小  查询最小用rmq #incl ...

  4. uiwebview 清缓存。，mark

    //清除cookies NSHTTPCookie *cookie; NSHTTPCookieStorage *storage = [NSHTTPCookieStorage sharedHTTPCook ...

  5. TADOTable 用过滤事件 后 记录数据和 记录的内容

    用 过滤事件,过滤后 ADOTbTrade.RecordCount 是总数, 但是,记录内容是 过滤后的 ADOTbTrade.First; while not ADOTbTrade.Eof do b ...

  6. HDU 5451 广义斐波那契数列

    这道题目可以先转化: 令f(1) = 5+2√6 f(2) = f(1)*(5+2√6) ... f(n) = f(n-1)*(5+2√6) f(n) = f(n-1)*(10-(5-2√6)) = ...

  7. fqrouter让安卓手机登陆facebook成为可能

    大多数人向来都是在电脑上通过各种代理工具来访问一些国外网站,例如facebook,twitter,然而你是否想过可以通过你的手机来畅游这些网站呢,接下来我将介绍一种通过fqrouer实现使用安卓手机畅 ...

  8. python遍历文件夹下的文件

    在读文件的时候往往需要遍历文件夹,python的os.path包含了很多文件.文件夹操作的方法.下面列出: os.path.abspath(path) #返回绝对路径 os.path.basename ...

  9. [网络技术]VPN设置

    1.解决VPN服务器默认路由困扰 现在移动办公已经变得家常便饭,每次外出出差办公需要访问单位的内网服务器时,该怎么办呢?相信很多人都想到了VPN连接!的确,使用VPN连接, 我们可以利用现成的Inte ...

  10. 苹果 Mac OS X Yosemite 10.10 新功能特性总结 - 扁平化、主打跨设备的无缝连通性

    苹果在2014.06.03凌晨的 WWDC 2014 大会上正式发布了最新的 OS X Yosemite 桌面操作系统和 iOS 8 移动系统.虽然整场发布会的重心都在软件上,并没有硬件亮相,但软件上 ...