JS运动---运动基础（匀速运动）
【一】运动基础
（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运动---运动基础（匀速运动）的更多相关文章
- javascript每日一练（九）——运动一：匀速运动
一.js的运动 匀速运动 清除定时器 开启定时器 运动是否完成:a.运动完成,清除定时器:b.运动未完成继续 匀速运动停止条件:距离足够近 Math.abs(当然距离-目标距离) < 最小运动 ...
- JS缓冲运动案例：右侧居中悬浮窗
JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...
- JS缓冲运动案例：右下角悬浮窗
JS缓冲运动案例:右下角悬浮窗 红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留. <!DOCTYPE html> <html lang=&quo ...
- Angular JS从入门基础 mvc三层架构 常用指令
Angular JS从入门基础 mvc模型 常用指令 ★ 最近一直在复习AngularJS,它是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心 ...
- JS函数的基础部分
JS函数的基础部分 JS函数的部分: 先看下一段的代码: window.onload = function(){ function test(){ alert("123"); ...
- js实现缓冲运动，和匀速运动有点不相同
缓冲运动和匀速运动有点不同,看图可以知道缓冲运动速度是越来越慢的. <style> *{ padding:0; margin:10px 0; } #div1{ height:100px; ...
- day38—JavaScript的运动基础-匀速运动
转行学开发,代码100天——2018-04-23 一.运动基础框架 JavaScript的运动可以广义理解为渐变效果,直接移动效果等,图网页上常见的“分享到”,banner,透明度变化等.其实现的基本 ...
- JS运动---运动基础（缓冲运动）
(1)手风琴效果 分析: (2)基础缓冲运动 接下来取整 原因: px为计算机识别的最小单位,1px无法再往下拆分.所以css如果取值200.5px,解析时计算机会自动将其改为200px注意:这里的数 ...
- [妙味JS基础]JS热身运动
知识点总结 获取ID元素 document.getElementById(' ') 事件:鼠标事件.键盘事件.系统事件.表单事件.自定义事件 onclick onmouseout onmouseove ...
随机推荐
- android上如何写配置文件
android上如何写配置文件:使用SharedPreferences SharedPreferences是Android平台上一个轻量级的存储类,用来保存应用的一些常用配置,比如Activity状态 ...
- 在 ASP.NET Core 中启用跨域请求（CORS）
本文介绍如何在 ASP.NET Core 的应用程序中启用 CORS. 浏览器安全可以防止网页向其他域发送请求,而不是为网页提供服务. 此限制称为相同源策略. 同一源策略可防止恶意站点读取另一个站点中 ...
- Fiddler抓取内容自动保存本地
Fiddler抓取内容自动保存本地 一.点击FidderScript 二.选择你想要的获得内容的方法 OnBeforeRequest:发送请求后 OnBeforeResponse:获得响应 三.修改j ...
- feign响应Image流对象
feign面向方法签名的http调用,越来越受欢迎,类型于rpc的thrift,只需要关注方法签名和返回值即可,当然feign响应流对象时,需要我们做一下特殊处理,否则会出现异常.也有一些文章通过重写 ...
- Python Exception处理
Python中的错误处理分为两类:语法错误和异常处理.语法错误一般是指由于python语句.表达式.函数等存在书写格式活语法规则上的错误抛出的异常,如python常见的缩进控制,若同层次的执行语句存在 ...
- mac下如何搭建python开发环境
1. 安装brew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/insta ...
- 选择IT公司的雇主提问
做为IT从业人员,我们去一家公司时,判断一家公司的专业性时,可以通过以下提问获得反馈: 技术问题 1.这个项目使用了哪些技术(语言,框架,库)?2.应用程序是一体化架构还是微服务架构?3.采用了哪些设 ...
- 逻辑卷管理器LVM
逻辑卷管理器LVM •将设备指定为物理卷 • 用一个或者多个物理卷来创建一个卷组 • 物理卷是用固定大小的物理区域(Physical Extent,PE)来定义的 • 在物理卷上创建的逻辑卷是由物理区 ...
- IPv6升级测试指南（Android/iOS/Mac）
目录 我们升级到IPv6的原因 测试的时候的注意要点 Android/IOS/MAC测试总结 Android测试IPv6的方法 IOS端测试IPv6的方法 MAC浏览器端测试IPv6的方法 升级IPV ...
- 在CV尤其是CNN领域的一些想法
现在的CNN还差很多,未来满是变数. 你看,现在的应用领域也无非merely就这么几类----分类识别,目标检测(定位+识别),对象分割......,但是人的视觉可不仅仅这么几个功能啊!是吧. 先说说 ...