<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        body{margin:0;padding:0;}

        div{width:100px;height:100px;background:red;position: absolute;left:0;}

        span{width:0;height:600px;position:fixed;left:600px;top:0;border-left:1px solid red;}

    </style>

</head>

<body>

<input type="button" value="buttons" onclick="startMove(600)"/>

<div></div>

<span></span>

</body>

</html>

<script type="text/javascript">

    var timer=null; //定时器需放在函数外面。避免每次调用都开启一个

    function startMove(iTarget)

    {

    var oDiv=document.getElementsByTagName("div")[0];

    clearInterval(timer);//移出全部的定时器，攻克了每次点击都开启一个定时器的问题

    timer=setInterval(function(){

        var Speed=Math.ceil((iTarget-oDiv.offsetLeft)/10);//解决





        if(oDiv.offsetLeft>=iTarget){clearInterval(timer);} //已经到达,匀速运动if里面的条件必须为>=

       else{oDiv.style.left=oDiv.offsetLeft+Speed+"px"; document.title=oDiv.style.left;}//未到达

    },30)





    }

</script>

缓冲运动-1-[解决1].html的更多相关文章

  1. js缓冲运动

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

  2. JavaScript 运动（缓冲运动，多物体运动 ,多物体多值运动+回调机制）

    匀速运动   (当需要物体做匀速运动直接调用statMove函数) function startMove(dom,targetPosetion){ //dom : 运动对象,targetPositio ...

  3. 原生JavaScript运动功能系列（二）：缓冲运动

    匀速运动实现回顾 缓冲运动剖析 示例实现 方法提取 匀速运动实现回顾及缓冲运动剖析: 在这个系列的上一篇博客中原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现就运动的核心功能组成 ...

  4. DOM+position:relative+缓冲运动

    一.nodeType节点类型 nodeType==3  ->文本节点 nodeType==1  ->元素节点 for(var i=0;i<oUl.childNodes.length; ...

  5. day39—JavaScript缓冲运动

    转行学开发,代码100天!——2018-04-24 今天继续学习JavaScript运动之缓冲运动.相对于匀速运动,缓冲运动的不同之处在于其速度值是不断变化的,越靠近目标点,速度越小. 即可以表示为: ...

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

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

  7. js动画之缓冲运动

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

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

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

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

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

  10. [Js]缓冲运动

    一.运动框架 1.在开始运动时,关闭已有定时器(否则会不断有新的定时器执行) 2.把运动和停止隔开(if/else) 二.缓冲运动 逐渐变慢,最后停止(距离越远速度越大) 速度=(目标值-当前值)/缩 ...

随机推荐

  1. struts2文件上传，文件类型 allowedTypes

    struts2文件上传,文件类型 allowedTypes 1 '.a' : 'application/octet-stream', 2 '.ai' : 'application/postscript ...

  2. mysqldump: command not found问题解决

    首先得知道mysql命令或mysqldump命令的完整路径,可以使用find命令查找除非你知道mysql安装路径可以略过这一步. find / -name mysql -print 例如我的mysql ...

  3. ICE学习第三步-----Slice语言

    ICE:Slice语言(一)-编译 Introduce简介 Slice(Specification language for ice)是分离对象和对象的实现的基础的抽象机制.Slice在客户端和服务器 ...

  4. 使用Thinkphp框架开发移动端接口

     本文给大家分享的是使用thinkphp框架开发移动端接口的2种方法,一种是开发API,另外一种是实现移动端访问自动切换移动主题模板,从而实现伪app访问,下面我们就来详细看下如何实现吧. 方案一:给 ...

  5. 使用ToUpperInvariant避免使用ToUpper

    ToUpperInvariant使用不依赖于区域性进行转换,而ToUpper则使用了当前线程的CultureInfo,进行转换,所以性能会有所影响,以下为测试: [Test] public void ...

  6. bzoj2597: [Wc2007]剪刀石头布

    Description 在一些一对一游戏的比赛(如下棋.乒乓球和羽毛球的单打)中,我们经常会遇到A胜过B,B胜过C而C又胜过A的有趣情况,不妨形象的称之为剪刀石头布情况.有的时候,无聊的人们会津津乐道 ...

  7. BZOJ 1021 循环的债务

    Description Alice.Bob和Cynthia总是为他们之间混乱的债务而烦恼,终于有一天,他们决定坐下来一起解决这个问题.不过,鉴别钞票的真伪是一件很麻烦的事情,于是他们决定要在清还债务的 ...

  8. 缩小jquery体积

    jQuery 分析 据统计,目前全世界57.3%的网站使用它.也就是说,10个网站里面,有6个使用jQuery.如果只考察使用工具库的网站,这个比例就会上升到惊人的91.7%. 虽然jQuery如此受 ...

  9. Struts2 实现分页

    1.转自:http://www.cnblogs.com/shiyangxt/archive/2008/11/04/1316737.html环境:MyEclipse6.5+Mysql5+struts2. ...

  10. linux内核空间与用户空间信息交互方法

    linux内核空间与用户空间信息交互方法     本文作者: 康华:计算机硕士,主要从事Linux操作系统内核.Linux技术标准.计算机安全.软件测试等领域的研究与开发工作,现就职于信息产业部软件与 ...