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 ...
随机推荐
- Python数据类型--字典（dict）
Python中的字典是键值对(key-value)的无序集合.每个元素包含"键"和"值"两部分,这两部分之间使用冒号分隔,表示一种对应关系.不同元素之间用逗号分 ...
- 2014年 实验四 B2B模拟实验（二）
[实验目的] ⑴.熟悉电子合同签订过程 ⑵.掌握网上招标的流程并体会招标对采购商带来的好处 [实验条件] ⑴.个人计算机一台 ⑵.计算机通过局域网形式接入互联网 ⑶.电子商务模拟实验室软件包. [知识 ...
- 【面试题】java一般
1.取最大最小值 public static int maxOrMinTest(List<Integer> list){ Integer[] integers = list.toArray ...
- day52 Pyhton 前端03
内容回顾 块级标签: div p h 列表:ol;ul;dl 表格:table 行内标签: span a i/em b/strong u/del 行内块: input textarea img 其他: ...
- 提取swagger内容到csv表格，excel可打开
swagger生成的页面api接口统计,有几种方法 直接在前端用js提取出来,较麻烦(不推荐,不同版本的页面生成的标签有可能不一样,因此可能提取不出来) //apilet a = document.g ...
- 扫描仪扫描文件处理-Python批量处理
多进程处理扫描出来的图片,参见: https://github.com/barrer/scan-helper bug问题反馈github提Issues
- kafka+zookeeper快速启动
vim zookeeper.sh #!/bin/bash /usr/local/zookeeper/bin/zkServer.sh restart /usr/local/zookeeper/con ...
- APP脱壳方法三
第一步 手机启动frida服务 第二步 手机打开要脱壳的app 第三步编辑hook代码 agent.js /* * Author: hluwa <hluwa888@gmail.com> * ...
- 【应用程序见解 Application Insights】在Application Insights中通过自定义查询结果定义指标并显示在Dashboard中
问题情形 通过Application Insights收集到指标数据后,如Request,Trace,Exception.但是默认的Insights图表不能满足业务的需求,需要自定义相应的类SQL语句 ...
- 联赛模拟测试22 D. 简单计算
题目描述 分析 \(\sum_{i=0}^p[(p|qi)?0:1]=\sum_{i=0}^p[(p/gcd(p,q)|qi/gcd(p,q))?0:1]=\sum_{i=0}^p[(p/gcd(p, ...