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+Appium自动化测试(5)-appium元素定位常用方法
对于Android而言,查找appUI界面元素属性的工具有三种:appium desktop,uiautomatorviewer.bat,weditor.之前已经介绍过了weditor的使用,这里我将 ...
- 多测师讲解自动化selenium___定位元素002___高级讲师肖sir
高级自动化测试python+selenium教程手册 --高级讲师肖sir(Harm) 第 2 章8种定位方法 总结: selenium 的 webdriver 提供了八种基本的元素定位方法,前面六种 ...
- 【学习笔记】扩展卢卡斯定理 exLucas
引子 求 \[C_n^m\ \text{mod}\ p \] 不保证 \(p\) 是质数. 正文 对于传统的 Lucas 定理,必须要求 \(p\) 是质数才行.若 \(p\) 不一定是质数,则需要扩 ...
- 【UR #13】Yist
UOJ小清新题表 题目摘要 UOJ链接 给出一个排列 \(A\) 以及它的一个非空子序列 \(B\),给出一个 \(x\) 并进行若干次操作,每一次操作需要在 \(A\) 中选择一个长度恰好为 \(x ...
- 【二分】CF Round #587 (Div. 3)E2 Numerical Sequence (hard version)
题目大意 有一个无限长的数字序列,其组成为1 1 2 1 2 3 1.......1 2 ... n...,即重复的1~1,1~2....1~n,给你一个\(k\),求第\(k(k<=10^{1 ...
- 解决Android RadioGroup跑到输入法上面
Android开发过程中,发现一个小问题,当我们点击屏幕下面的输入框时,我们的RadioGroup会跑到输入法的上面去,如下图 两种解决方法 1.Manifest.xml文件activity标签中添加 ...
- mysql复制一个表到其他数据库
db1为原数据库,db2为要导出到的数据库,fromtable 是要导出的表名1.方法一:登录导出到的数据库,执行create table fromtable select * from db1.fr ...
- Qt中的Q_OBJECT作用， 以及信号槽
自定义类时, 如果需要使用Qt框架提供的信号槽机制, 必须满足以下两个条件: 第一:该类必须是QObject类的子类或者间接子类. 其次:在定义类时, 首行必须加上宏Q_OBJECT class My ...
- windows10安装虚拟机
转载自:http://blog.51cto.com/13438667/2059926 一.安装环境 windows10操作系统物理机VMware Workstation 软件(可以在网上下载)Cent ...
- Python+Post请求中涉及到多个参数data方法的应用
进行post请求,Python提供了httplib.urllib2,同时也可以引用requests模块的一些方法.前几天做持续集成,运用requests写了一个post请求.代码如下: import ...