【一】运动基础

（2）基础运动案例

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>demo</title>

    <style type="text/css">

        .parent{

            width: 600px;

            height: 300px;

            border: 1px solid;

            margin: 10px auto;

            position: relative;

        }

        .child{

            width: 100px;

            height: 100px;

            background: blue;

            position: absolute;

            top: 20px;

            left: 20px;

        }

    </style>

</head>

<body>

    <button id="sport">运动</button>

    <div class="parent">

        <div class="child"></div>

    </div>

    <script type="text/javascript">

        var parent = document.querySelector('.parent');

        var child = document.querySelector('.child');

        var btn = document.querySelector('#sport');

        btn.onclick = function(){

            setInterval(()=>{

                child.style.left = child.offsetLeft +  + 'px'

            },)

        }

    </script>

</body>

</html>

目前为止只是简单跑了起来，并没有停止

（3）停止运动

添加时间标识符，进行判断即可

（4）优化速度，运动流畅

　　目前为止，运动有些卡顿，如果想让速度慢些，有两种方式：时间间隔或速度speed步进值

　　1、如果设置时间间隔会更加卡顿帧动画

　　2、修改布进值即可

　　

　　3、将其抽离出来为speed

　　

　　如果为21，停下来时打印下最后一刻距离左侧位置

　　

　　4、问题：此时虽然已经挺住，但是再次单击时，滑块仍然会一步一步前移

　　

　　5、问题：将速度调慢，点击一次后开始运动，在结束运动前如果再次点击，则速度会叠加起来，逐渐增快... ...

　　原因分析：每次点击都会新建一个定时器，所以这里定时器会不断增加，好几个定时器同时运行

　　

　　点击时清除定时器即可，保证同一时间只有一个定时器在工作... ...

【二】运动框架及应用

（1）分享侧边栏

同理鼠标移出时，往回走

接下来抽离公共部分，做代码优化

优化：根据当前位置和目标点关系推理速度正负

目前为止，只需传入一个参数即可

（2）鼠标透明度变化

.

JS运动---运动基础（匀速运动）的更多相关文章

  1. javascript每日一练（九）——运动一：匀速运动

    一.js的运动 匀速运动 清除定时器 开启定时器 运动是否完成:a.运动完成,清除定时器:b.运动未完成继续 匀速运动停止条件:距离足够近  Math.abs(当然距离-目标距离) < 最小运动 ...

  2. JS缓冲运动案例：右侧居中悬浮窗

    JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...

  3. JS缓冲运动案例：右下角悬浮窗

    JS缓冲运动案例:右下角悬浮窗 红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留. <!DOCTYPE html> <html lang=&quo ...

  4. Angular JS从入门基础 mvc三层架构 常用指令

    Angular JS从入门基础  mvc模型 常用指令 ★ 最近一直在复习AngularJS,它是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心 ...

  5. JS函数的基础部分

    JS函数的基础部分 JS函数的部分: 先看下一段的代码: window.onload = function(){  function test(){   alert("123"); ...

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

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

  7. day38—JavaScript的运动基础-匀速运动

    转行学开发,代码100天——2018-04-23 一.运动基础框架 JavaScript的运动可以广义理解为渐变效果,直接移动效果等,图网页上常见的“分享到”,banner,透明度变化等.其实现的基本 ...

  8. JS运动---运动基础（缓冲运动）

    (1)手风琴效果 分析: (2)基础缓冲运动 接下来取整 原因: px为计算机识别的最小单位,1px无法再往下拆分.所以css如果取值200.5px,解析时计算机会自动将其改为200px注意:这里的数 ...

  9. [妙味JS基础]JS热身运动

    知识点总结 获取ID元素 document.getElementById(' ') 事件:鼠标事件.键盘事件.系统事件.表单事件.自定义事件 onclick onmouseout onmouseove ...

随机推荐

  1. MySQL数据库基础笔记

    数据库 数据库就是存储和管理数据的仓库,用户可以对数据库中的数据进行增删改查等操作. 数据库的分类 关系型数据库(Oracle.MySQL.SQLite等) 非关系型数据库(Redis.MongoDB ...

  2. jumpserver 资产管理及授权

    1.用户管理-添加[用户列表] 1.1点击创建用户 1.2创建用户 2.用户管理-添加[用户组] 2.1点击创建用户组 2.2创建用户组   3.资产管理添加资产 3.1添加节点 3.2添加资产(点击 ...

  3. Feign Date类型时间错误问题

    问题 在feign传输date类型的数据时,在调用方时间正确,而被调用方获取时时间会相差14个小时. 原因 Feign客户端在进行通信时,会将Date类型对象转为String类型,如果这个时间是北京时 ...

  4. MariaDB修改配置文件允许远程访问

    MariaDB修改配置文件允许远程访问 最近在使用MariaDB数据库配置用户的远程访问的时候,遇到了一个坑,费了些功夫解决了一下,特此写一下博客,以防下次再遇到的时候忘了解决方案,废话不多说,我们直 ...

  5. vs2017 C# ActiveX浏览器插件 创建 发布 C# windows窗体控件库（.NET Framework）注意事项

    vs2017需要安装插 插件下载地址:https://marketplace.visualstudio.com/items?itemName=VisualStudioProductTeam.Micro ...

  6. Vue结合后台导入导出Excel问题详解后续

    接前几天写的一篇博客  https://www.cnblogs.com/ttjm/p/11307462.html 在ie浏览器测试发现打不开,经调查问题如下 1 如果在本地开发调试,请求接口报错如下 ...

  7. js-06-字符串

    一.查找字符串的字符串 a:indexOf:没有查询到返回值为-1: b:lastIndexoOf:查找到的为重复的最后一个: c:search 查找: var str="good good ...

  8. "echo 0 /proc/sys/kernel/hung_task_timeout_secs" disable this message

    问题现象: 问题原因: 默认情况下, Linux会最多使用40%的可用内存作为文件系统缓存.当超过这个阈值后,文件系统会把将缓存中的内存全部写入磁盘, 导致后续的IO请求都是同步的. 将缓存写入磁盘时 ...

  9. Download Shuttle Pro mac文件下载器使用指南

    Download Shuttle Pro是适用于macOS的最强大的下载管理器和加速器.它将文件下载分为多个部分,与使用Web浏览器相比,可以提高整体下载速度.使用我们的Pro版本,您可以访问我们的新 ...

  10. Ubuntu18.04 下最好用的gif录制工具peek

    最近在写代码,需要找一个ubuntu下的录制屏幕工具,尝试了几个,发现peek是最好用的.这里就给大家推荐一下. 一 安装: 该软件是一个在gihtub上的开源软件,源码路径: https://git ...