js实现减速运动

这个实现效果是在老师的提点下完成的,当时自己一直陷入在怎样才能够实现匀减速运动中不能出来,代码中的亮点已经表明……欢迎大家指正交流……

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>减速运动</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #oplay{
            width:200px;
            height:200px;
            position: absolute;
            left:0;
            background-color: #B7B7B7;
        }
        #start_btn{
            position: absolute;
            top:220px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div id="oplay"></div>
    <button id="start_btn">开始运动</button>
    <script>
        var oplay = document.getElementById("oplay");
        var start_btn = document.getElementById("start_btn");
        var interval,speed;
        start_btn.onclick = function(){
            clearInterval(interval);
            interval = setInterval(function(){
                if(oplay.offsetLeft>=300){
                    clearInterval(interval);
                }else{
                    //这个地方是关键,怎样才能够使speed在移动元素在停止的时候正好速度为0
                    speed = (300-oplay.offsetLeft)/10;
                    oplay.style.left = oplay.offsetLeft+speed+"px";
                }
            },30);
        }
    </script>
</body>
</html>
时间: 2024-10-29 01:14:23

js实现减速运动的相关文章

js模拟抛出球运动

js练手之模拟水平抛球运动 -匀加速运动 -匀减速运动 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>js模拟抛出球运动</titl

move ---- 编写一个包含几种常用动画的js库

在操作dom元素的时候为了让网站显得更有活力或者某些想让人注意到, 经常需要用到一些小动画, 但常用的 jquery 库只有一种ease(先加速后减速的动画)运动方式的动画, 虽然这是很常用的动画, 但有时也会用到其他的, 最近写了一个集成几种常用动画的库, move.js , 如果不是走动画队列的话, 通常的动画库在进行一个动画的时候, 在对元素施加另一个动画就会马上停止当前动画, 马上执行新添加的动画, move动画库稍微修改了一下, 在新动画添加之后, 老动画还会继续跑, 两个动画会进行叠

JS运动基础(三) 弹性运动

加减速运动速度不断增加或减少速度减小到负值,会向反方向运动弹性运动在目标点左边,加速:在目标点右边,减速根据距离,计算加速度带摩擦力的弹性运动弹性运动+摩擦力 弹性:速度 += (目标点 - 当前值)/系数;  //6 , 7 , 8速度 *= 摩擦系数;   // 0.7 0.75终止条件距离足够近 并且 速度足够小 缓冲:var 速度 = (目标点 - 当前值)/系数;速度取整 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <me

【API】高德地图API JS实现获取坐标和回显点标记

1.搜索+选择+获取经纬度和详细地址 2.回显数据并点标记 3.实现 第一步:引入资源文件 <!--引入高德地图JSAPI --><script src="//webapi.amap.com/maps?v=1.3&key=在官网申请一个key"></script><!--引入UI组件库(1.0版本) --><script src="//webapi.amap.com/ui/1.0/main.js">

js跨域

第一次写博客,好紧张,不知道能写成啥样,哈哈哈. 自己的一知片解,有错请多多指教,嘻嘻嘻. 一.何为跨域? 只要协议.域名.端口后任何一个不同,就是跨域. 举个例子: http://www.example.com 协议不同 https://www.example.com http://www.example.com 域名不同 http://www.test.com http://www.example.com 端口不同 http://www.example.com:81 注意:ip相同,域名不同

Vue.js学习笔记:属性绑定 v-bind

v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> 绑定HTML Class 一.对象语法: 我们可以给v-bind:class 一个对象,以动态地切换class.注意:v-bind:class指令可以与普通的class特

node.js的安装及配置

一.安装 直接在浏览器搜索node.js,在官网上下载(一般旧版的更加稳定,比如下载4.4.7版本) 点击DOWNLOADS 往下翻,点击Previous Release Windows下载msi(64位/32位) 根据提示一步步安装,安装之后的文件夹如下: 在cmd命令行下输入node -v,如果出现如下,说明安装成功: 二.关于配置 在安装路径下新建两个文件夹: 创建完两个空文件夹之后,打开cmd命令窗口,输入 npm config set prefix "D:\Program Files

Node.js 使用angularjs取得Nodejs http服务端返回的JSON数组示例

server.js代码: // 内置http模块,提供了http服务器和客户端功能(path模块也是内置模块,而mime是附加模块) var http=require("http"); // 创建服务器,创建HTTP服务器要调用http.createServer()函数,它只有一个参数,是个回调函数,服务器每次收到http请求后都会调用这个回调函数.服务器每收到一条http请求,都会用新的request和response对象触发请求函数. var server=http.createS

Knockout.js简介

Knockout是一款很优秀的JavaScript库,通过应用MVVM模式使JavaScript前端UI简单化.任何时候你的局部UI内容需要自动更新,KO都可以很简单的帮你实现,并且非常易于维护. Knockout的3个核心功能是: ? 属性监控与依赖跟踪 ? 声明式绑定 ? 模板机制 MVVM Model-View-View Model (MVVM)是一种创建用户界面的设计模式. ? Model:用于存储应用程序数据,表示业务领域的对象和数据操作,并且独立于任何界面. 当使用KO的时候,通常是