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 ...
随机推荐
- BUUCTF_web_三
下面还是简单web的入门题 [GKCTF2020]cve版签到 这次的比赛最简单的题了吧,提示是CVE-2020-7066,但是网上没有几个关于这个漏洞的相关利用的文章,似乎是get_header() ...
- MeteoInfoLab脚本示例：多坐标系
绘图的时候首先要有坐标系(Axes),可以用axes命令创建,如果没有创建在绘图时会自动创建一个.参数里的position是用来置顶坐标系的图形(figure)中的位置的,通过位置置顶,可以将多个坐标 ...
- Asp常见函数
ASP语言的特点: 1.允许使用VBscript或java script简易Script语言,并可在文件中结合Html: 2.无需编译,由WEBserver执行产生: 3.与任何ActiveX Scr ...
- spring-security-结合JWT的简单demo
spring-security-demo 前言:本来是想尽量简单简单点的写一个demo的,但是spring-security实在是内容有点多,写着写着看起来就没那么简单了,想入门spring-secu ...
- vscode设置snippets
自动添加文件描述信息 "File Comments": { "prefix": "filecomments", "body&quo ...
- linux(centos8):firewalld的运行时日志配置
一,firewalld配置日志的用途: 在生产环境中,firewalld的默认配置是不记录日志 我们通过日志记录下防火墙过滤时拒绝的非法ip, 可以主动把这些有攻击性的ip加入到黑名单, 防患于未然 ...
- php+nginx 整合
php编译 https://www.cnblogs.com/php-linux/p/12360858.html nginx编译 https://www.cnblogs.com/php-linux/p/ ...
- Markdown基础知识
一 Markdown简介 Markdown是⼀种可以使⽤普通⽂本编辑器编写的标记语⾔,通过简单的标记语法,它可以使普通⽂本内容具有⼀定的格式,可以简单理解为纯⽂本格式的word. 软件⼀般⽤vscod ...
- 原生JS实现动态折线图
原生JS实现动态折线图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...
- Java异常ClassCastException
在说ClassCastException之前,先介绍下引用类型转换: 引用类型转换分为向上转型和向下转型两种: 向上转型:多态本身是子类类型向父类类型向上转换的过程,这个过程是默认的:当父类引用指向一 ...