JS缓冲运动案例
点击“向右”按钮,红色的#red区块开始向右缓冲运动,抵达到黑色竖线位置自动停止,再次点击“向右”#red区块也不会再运动。点击“向左”按钮,红色的#red区块开始向左缓冲运动,抵达到蓝色竖线位置自动停止,再次点击“向左”#red区块也不会再运动。
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<title>JS小案例:缓冲运动</title>
<style>
#red {
width: 200px;
height: 200px;
background: red;
position: absolute;
top: 50px;
left: 200px;
} .black {
position: absolute;
width: 1px;
height: 200px;
left: 900px;
background: black;
top: 50px; } .blue {
position: absolute;
width: 1px;
height: 200px;
left: 200px;
background: blue;
top: 50px; }
</style>
<script>
//补充代码 </script>
</head> <body> <input type='button' value='向右' id='btn' />
<input type='button' value='向左' id='btn-left' />
<div id='red'></div>
<div class='black'></div>
<div class='blue'></div>
</body> </html>
参考代码:
window.onload = function () {
var oDiv = document.getElementById('red');
var oBtn = document.getElementById('btn');
var oBtnLeft = document.getElementById('btn-left');
var timer = null;
function startMove(iTarget) {
clearInterval(timer);
timer = setInterval(function () {
var speed = (iTarget - oDiv.offsetLeft) / 30;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if (oDiv.offsetLeft == iTarget) {
clearInterval(timer)
} else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
} }, 30) }
oBtn.onclick = function () {
startMove(700);
} oBtnLeft.onclick = function () {
startMove(200);
}
}
JS缓冲运动案例的更多相关文章
- JS缓冲运动案例:右侧居中悬浮窗
JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...
- JS缓冲运动案例:右下角悬浮窗
JS缓冲运动案例:右下角悬浮窗 红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留. <!DOCTYPE html> <html lang=&quo ...
- js缓冲运动
缓冲运动 现象:逐渐变慢,最后停止 原理:距离越远,速度越大 速度的计算方式: 1,速度由距离决定 2,速度=(目标值-当前值)/缩放系数 说明:速度为正负数时,也决定了物体移动的方向 示例:div缓 ...
- [Js]缓冲运动
一.运动框架 1.在开始运动时,关闭已有定时器(否则会不断有新的定时器执行) 2.把运动和停止隔开(if/else) 二.缓冲运动 逐渐变慢,最后停止(距离越远速度越大) 速度=(目标值-当前值)/缩 ...
- JS 缓冲运动 带运动的留言本 小案例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- js 运动函数篇 (一) (匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动)层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...
- js实现缓冲运动,和匀速运动有点不相同
缓冲运动和匀速运动有点不同,看图可以知道缓冲运动速度是越来越慢的. <style> *{ padding:0; margin:10px 0; } #div1{ height:100px; ...
- js动画之缓冲运动
缓冲运动就是运动的速度与时间或者距离有关联,不是一般的匀速运动 <!DOCTYPE html> <html lang="en"> <head> ...
- JS运动基础(二) 摩擦运动、缓冲运动
摩擦运动: 逐渐变慢,最后停止 缓冲运动: 与摩擦力的区别:可以精确的停到指定目标点距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数Bug:速度取整值取整: iSpeed = iSpe ...
随机推荐
- ansible-playbook定义变量与使用
1. ansible-playbook变量定义与使用 命令行 在Inventory中定义 在Playbook中定义 在Role中定义 注册变量(register) 系统信息变量(facts) 2. 在 ...
- git pull设置为无需密码
https方式每次都要输入密码,按照如下设置即可输入一次就不用再手输入密码的困扰而且又享受https带来的极速 设置记住密码(默认15分钟): git config --global credenti ...
- day28 Pyhton 面向对象 继承
1.昨日回顾 类的命名空间 静态属性\动态属性(方法) 对象的命名空间 #对象的属性 #类指针:对象能够通过这个类指针找到类 #静态属性:属于类,多个对象共享这个资源 #尽量用类名来操作静态属性 #对 ...
- Verilog基础入门——简单的语句块编写(一)
[题干] [代码] module top_module ( input in, output out ); assign out = ~in; endmodule 简单的实现一个非门
- maven项目导入eclipse报错
错误提示: 原因:未安装maven,缺少ojdbc6.jar包 解决: 一.安装maven 第一步百度搜索Maven官网,进去之后,下载apache-maven-3.5.3-bin.zip,下载完成之 ...
- 如何快速在vscode配置C/C++环境
目录 1.卸载重装vscode 2.下载vscode 3.下载MinGW 4.配置环境变量 5.配置c/c++环境 6.超完整的配置文件 7.常用扩展推荐 8.注意 9.后记 相信许多刚开始使用vsc ...
- ValidatorException-异常
Java在发送Https请求的时候,不可避免的会发生SSL证书认证失败 错误信息:sun.security.validator.ValidatorException: PKIX path buildi ...
- java 内存可见性
java线程 -> 线程工作内存 -> 主物理内存 线程工作内存的原理是栈内是连续的小空间,寻址速度比堆快得多,将变量拷贝到栈内生成副本再操作 什么是重排序 代码指令可能并不是严格按照代码 ...
- Zotero使用教程
之前一直想有一个管理文献的好工具,但囿于麻烦都没有去做.最近需要阅读大量的文献,便重新拾起了这个念头,在几经搜索后,选定了Zotero作为文献管理工具. 至于为什么选择这个软件,我也许并说不清,网上有 ...
- kettle插入更新流程
kettle转换步骤工作组件 这里有四个类构成了这个kettle 步骤/节点,每一个类都有其特定的目的及所扮演的角色. TemplateStep: 步骤类实现了StepInteface接口,在转换运 ...