1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. </head>
  5. <style>
  6. *{margin:0;padding:0;}
  7. #w{width:200px;height:200px;background:#ccc;overflow:hidden;position:relative;left:0px;}
  8. #w1{width:400px;height:200px;}
  9. </style>
  10. <script>
  11. window.onload=function(){
  12.     var oDiv=document.getElementById("w");
  13.     var oDiv1=document.getElementById("w1");
  14.     var oIput=document.getElementById("btn");
  15.     var oTxt=document.getElementById("txt");
  16.     var speed=0;
  17.     var timer=null;//timer=setInterval(sMove,1000);
  18.  
  19.     /*减速运动*/
  20.  
  21.     function mMove(target){
  22.         speed=(target-oDiv.offsetLeft)/8;
  23.         speed = speed>0?Math.ceil(speed):Math.floor(speed);
  24.         if(oDiv.offsetLeft==target){
  25.  
  26.             clearInterval(timer);
  27.             console.log("计时器停止"+speed);
  28.  
  29.         }else{
  30.             oDiv.style.left=oDiv.offsetLeft+speed+"px";
  31.             console.log("speed="+speed);
  32.             console.log("oDiv.offsetLeft="+oDiv.offsetLeft);
  33.         }
  34.     }
  35.     oIput.onclick=function(){
  36.         timer=setInterval(function(){mMove(oTxt.value)},100);
  37.     };
  38.  
  39. };
  40. </script>
  41. <body>
  42. <input type="button" value="button" id="btn" />
  43. <input  type="text" id="txt" />
  44. <div id="w">
  45.     <div id="w1"></div>
  46. </div>
  47. </body>
  48. </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. netbios wins dns LLMNR

    NetBIOS名称 Network Basic Input/Output System  (RFC-1001,1002)网络基本输入/输出系统协议 NetBIOS是一种高级网络接口,最初是在硬件中实 ...

  2. java 面向对象编程-- 第15章 集合框架

    1.  集合特点:元素类型不同.集合长度可变.空间不固定 2.  java中对一些数据结构和算法进行了封装即集合.集合也是一种对象,用于存储.检索.操作和传输对象. 3.  JCF(Java Coll ...

  3. jsm使用

    参考:http://blog.csdn.net/robinjwong/article/details/38820259

  4. js基础之数组

    数组方法 添加: push arr.push();//尾部添加 unshift arr.unshift();//头部添加 删除: pop arr.pop();//尾部删除 shift arr.shif ...

  5. 各种主流数据库的比较(所以说我觉得Oracle这个keng?入的不错?)

    随着计算机技术不断发展,各种数据库编程工具也随着发展,使当今的大多数程序开发人员可以摆脱枯燥无味的用计算机指令或汇编语言开发软件,而是利用一系列高效的.具有良好可视化的编程工具去开发各种数据库软件,从 ...

  6. sqlite多表关联update

    sqlite数据库的update多表关联更新语句,和其他数据库有点小不一样 比如:在sql server中: 用table1的 id 和 table2的 pid,关联table1 和 table2 , ...

  7. IE7的overflow失效的解决方法

    IE7的position:relative bug今天遇到了一个相对定位(position:relaitve)引起的IE7中overflow:hidden失效的bug,特此记录!解决方法很简单,给父层 ...

  8. 解决 “fatal error C1083: ”无法打开包括文件

    添加该项目的附加路径 . 1)右键查看该项目的属性 2)点击配置属性——〉  C/C++  ——〉  常规  ——〉 附加包含目录——〉将缺失文件所在目录添加进去

  9. [网络技术][转]PPTP连接过程

    转自:http://blog.csdn.net/zhu_hit/article/details/5698958 在未来几天会总结一下PPTP的工作过程,分为以下3篇讲述. 1. PPTP连接过程: 2 ...

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

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