第八节 JS运动基础
运动基础
让Div运动起来
速度——物体运动的快慢
运动中的Bug
不会停止
速度取某些值会无法停止
到达位置后再点击还会运动
重复点击速度加快
匀速运动（速度不变）
运动框架及应用：
运动框架：
在开始运动时，关闭已有定时器
把运动和停止隔开（if/else）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS运动基础</title>
<style>
#div1{
width: 200px;
height: 200px;
background: yellow;
position: absolute;
top: 50px;
left: 0px;
}
</style>
<script>
var timer=null; //用于存储定时器 function startMove() {
var oDiv=document.getElementById('div1'); clearInterval(timer); //不管之前有没有定时器，都先关闭，然后下面开启定时器，以保证每次点击该事件时只有一个定时器在工作， timer=setInterval(function () {
var speed=7; //控制物体运动的快慢 //注意此时，速度为7，而距离300不能整除7，所以当到达294时直接跳过300，而直接到301，所以物体就不会停止，而是继续向下运动，
// if (oDiv.offsetLeft==300){ //当离左边的距离为300像素的时候，关掉定时器，使其停止运动
if (oDiv.offsetLeft>=300){ //解决不会停止的办法，此时停在的301px的位置，但是问题又来了，如果再次点击按钮，
// 则物体会运动7像素，再点击一下，有运动7像素，一直点击，一直运动7的倍数个像素
//这是因为，每次点击按钮时，都会重新开一个定时器，所以每次点击就会运动一下，解决办法如下else中语句
clearInterval(timer); //到达终点以后要做的事情
} else {
oDiv.style.left=oDiv.offsetLeft+speed+'px'; //到达终点之前要做的事情
}
// oDiv.style.left=oDiv.offsetLeft+speed+'px'; //offsetleft就是取div的位置; speed控制运动速度
}, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="开始运动" onclick="startMove()"/>
<div id="div1"></div> </body>
</html>
运动框架实例：
例1：“分享到”侧边栏（通过目标点，计算速度值）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>侧边隐藏栏</title>
<style>
*{margin: 0px;padding: 0px;}
#div1{
width: 150px;
height: 150px;
background: green;
position: absolute;
top: 100px;
left: -150px;
}
#div1 span{
width: 20px;
height: 60px;
line-height: 20px;
position: absolute;
background: blue;
right: -20px;
top: 20px;
}
</style>
<script>
window.onload=function () {
var oDiv=document.getElementById('div1');
// oDiv.onmouseover=function () {
// InOut1(10, 0); //传入参数speed, iTarget
// };
// oDiv.onmouseout=function () {
// InOut1(-10, -150); //传入参数speed, iTarget
// };
oDiv.onmouseover=function () {
InOut2(0); //传入参数iTarget
};
oDiv.onmouseout=function () {
InOut2(-150); //传入参数iTarget
};
}; var timer=null;
// function Out() {
// var oDiv=document.getElementById('div1');
// clearInterval(timer);
// timer=setInterval(function () {
// if (oDiv.offsetLeft == 0) {
// clearInterval(timer);
// } else {
// oDiv.style.left=oDiv.offsetLeft+10+"px";
// }
// }, 30);
// }
//
// function In() {
// var oDiv=document.getElementById('div1');
// clearInterval(timer);
// timer=setInterval(function () {
// if (oDiv.offsetLeft == -150) {
// clearInterval(timer);
// } else {
// oDiv.style.left=oDiv.offsetLeft-10+"px";
// }
// }, 30);
// } //代码合并，把要发生变动的“量”定义为参数，调用时直接传入
// function InOut1(speed, iTarget) {
// var oDiv=document.getElementById('div1');
// clearInterval(timer);
// timer=setInterval(function () {
// if (oDiv.offsetLeft == iTarget) {
// clearInterval(timer);
// } else {
// oDiv.style.left=oDiv.offsetLeft+speed+"px";
// }
// }, 30);
// } //代码简化，尽量少传入参数
function InOut2(iTarget) {
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function () {
var speed=0;
if (oDiv.offsetLeft>iTarget){
speed=-10; //当当前位置大于预设目标位置，向左移动
} else {
speed=10; //当当前位置小于预设目标位置，向右移动
} if (oDiv.offsetLeft == iTarget) {
clearInterval(timer);
} else {
oDiv.style.left=oDiv.offsetLeft+speed+"px";
}
}, 30);
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
<a>hhhhhh</a>
</div>
</body>
</html>
例2：淡入淡出的图片（用变量存储透明度）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内容淡入淡出-透明度的变换</title>
<style>
#div1{
width: 200px;
height: 200px;
background: red;
filter:alpha(opacity:30); /*IE透明度*/
opacity: 0.3; /*Chrome Firefox透明度*/
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1'); oDiv.onmouseover=function () {
Fade_In_Out(100); //淡入
};
oDiv.onmouseout=function () {
Fade_In_Out(30); //淡出
};
}; var alpha = 30; //因为没有offsetAlpha该参数，所以我们改变透明度时，需要自定义变量
var timer = null;
function Fade_In_Out(iTarget) {
var oDiv = document.getElementById('div1');
clearInterval(timer);
timer = setInterval(function () {
var speed = 0; //变化速度
if (alpha < iTarget){
speed = 10;
} else {
speed = -10;
} if (alpha == iTarget){
clearInterval(timer);
} else {
alpha += speed;
oDiv.style.filter = 'alpha(opacity:'+alpha+')'; //IE改变透明度，其中“:”可以换位“=”
oDiv.style.opacity = alpha/100; //Chrome FireFox
}
}, 30);
}
</script>
</head>
<body>
<div id="div1"> </div>
</body>
</html>
缓冲运动
逐渐变慢，最后停止
距离越远速度越大：速度由距离决定（距离越大，速度越快；距离越小，速度越慢），速度=(目标值-当前值)/缩放系数
例子：缓冲菜单
Bug：速度调整（所以当用到缓冲运动时，切记一定要用到取整，否则会有误）
// alert(Math.ceil(3.01)); //返回值为4，表示向上取整
// alert(Math.floor(3.999)); //返回值为3，表示向下取整
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>速度调整</title>
<style>
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0px; /*向右运动*/
/*left: 600px; !*向左运动*!*/
top: 50px;
}
#div2{
width: 1px;
height: 300px;
position: absolute;
background: black;
left: 300px;
top: 0px;
}
</style>
<script>
// alert(Math.ceil(3.01)); //返回值为4，表示向上取整
// alert(Math.floor(3.999)); //返回值为3，表示向下取整 function startMove() {
var oDiv = document.getElementById('div1');
setInterval(function () {
//不断计算left的值，首先是(300-0)/15，之后是(300-x)/15，而x不断增大，速度也就逐渐变慢
var speed = (300-oDiv.offsetLeft)/15; // speed = Math.ceil(speed); //当div1向有运动时，速度向上取整
// speed = Math.floor(speed); //当div1向左运动时，速度向下取整
speed = speed>0?Math.ceil(speed):Math.floor(speed); //上面两句代码的合并 oDiv.style.left = oDiv.offsetLeft+speed+'px'; document.title = oDiv.offsetLeft+','+speed; //把主题title转换为left和speed的值，方便观察变化
}, 30);
}
</script>
</head>
<body>
<button onclick="startMove()">开始运动</button>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
跟随页面滚动的缓冲侧边栏
潜在问题：目标值不是整数时；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>右侧悬浮框</title>
<style>
body{height: 2000px; /*为了呈现出滚动条*/}
#div1{
width: 100px;
height: 150px;
background: red;
position: absolute;
right: 0px;
bottom: 318px;
}
</style>
<script>
//onscroll滚动
window.onscroll = function(){
var oDiv = document.getElementById('div1');
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; // oDiv.style.top = (document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop)/2+'px';
//此时存在的问题是，在滑动滚动条的时候，div1的变化“有跳动”，跳一下才变换到正确位置，所以我们注释掉，解决方法为：
startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));
//(可视区的高-div的高)/2 表示把需要悬浮的框，悬浮在靠右中间的位置；
// 其中parseInt() 表示避免“除以2”时出现0.5的像素值(屏幕没有半个像素的情况)，此时悬浮框会出现上下抖动的情况，而用parseInt()取整后就不会出现这种情况了。
}; var timer=null;
function startMove(iTarget) {
var oDiv = document.getElementById('div1');
clearInterval(timer);
timer = setInterval(function(){
var speed = (iTarget-oDiv.offsetTop)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed); //取整 if (oDiv.offsetTop==iTarget){
clearInterval(timer);
} else {
document.getElementById('txt1').value = oDiv.offsetTop; //调整悬浮框的位置，以便观察
oDiv.style.top = oDiv.offsetTop+speed+'px';
}
}, 30);
}
</script>
</head>
<body>
<input type="txt1" id="txt1" style="position: fixed; right: 0px; top: 0px;"/>
<div id="div1"></div>
</body>
</html>
匀速运动的停止条件
运动终止条件：
匀速运动：距离足够近
缓冲运动：两点重合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>匀速运动停止条件</title>
<style>
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0px; /*向右运动*/
/*left: 600px; !*向左运动*!*/
top: 50px;
}
#div2{
width: 1px;
height: 300px;
position: absolute;
background: black;
left: 300px;
top: 0px;
}
#div3{
width: 1px;
height: 300px;
position: absolute;
background: black;
left: 100px;
top: 0px;
}
</style>
<script>
// alert(Math.abs(-6)); //返回值为6，abs()表示绝对值 var timer = null;
function startMove(iTarget) {
var oDiv = document.getElementById('div1'); clearInterval(timer);
timer = setInterval(function () {
var speed = 0;
if (oDiv.offsetLeft<iTarget){
speed = 7; //故意找一个不能整除的数字，以便发现问题
} else {
speed = -7;
}
//问题出现，由于最终结果不为0，所以会因为有一定的偏差而相对抖动，我们所能够解决的是在存在偏差的情况下，结束抖动，解决办法如下：
if (Math.abs(iTarget-oDiv.offsetLeft)<=7){
clearInterval(timer); //因为上面偏差是不能消除的，此时我们为了消除偏差，强行令left值等于目标值
oDiv.style.left = iTarget+'px'; //由于程序运行的速度较快，这种强行赋值使用肉眼是观察不到的
} else {
oDiv.style.left = oDiv.offsetLeft+speed+'px';
}
}, 30);
}
</script>
</head>
<body>
<button onclick="startMove(100)">到100px</button>
<button onclick="startMove(300)">到300px</button>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
第八节 JS运动基础的更多相关文章
- 学习blus老师js(6)--js运动基础
运动基础 一.匀速运动 运动框架 在开始运动时,关闭已有定时器 把运动和停止隔开(if/else) <!DOCTYPE HTML> <html> <head> &l ...
- JS运动基础(一)
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- js运动基础2（运动的封装）
简单运动的封装 先从最简单的封装开始,慢慢的使其更丰富,更实用. 还是上一篇博文的代码,在此不作细说. 需求:点击按钮,让元素匀速运动. <!DOCTYPE html> <html ...
- JS运动基础(四) 碰撞运动
碰撞运动撞到目标点,速度反转无重力的漂浮Div速度反转滚动条闪烁的问题过界后直接拉回来 加入重力反转速度的同时,减小速度纵向碰撞,横向速度也减小横向速度小数问题(负数) <!DOCTYPE HT ...
- JS运动基础(三) 弹性运动
加减速运动速度不断增加或减少速度减小到负值,会向反方向运动 弹性运动在目标点左边,加速:在目标点右边,减速根据距离,计算加速度 带摩擦力的弹性运动弹性运动+摩擦力 弹性:速度 += (目标点 - 当前 ...
- JS运动基础(二) 摩擦运动、缓冲运动
摩擦运动: 逐渐变慢,最后停止 缓冲运动: 与摩擦力的区别:可以精确的停到指定目标点距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数Bug:速度取整值取整: iSpeed = iSpe ...
- JS运动基础
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Javascript 运动基础 01
JS运动基础 运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动 速度不变 <s ...
- JS学习-基础运动
多物体运动 多个物体用同一个函数时,函数里定义的定时器应该要每个物体对应一个定时器名称,不然会导致未完成运动就被关闭了,因为定时器名称一样,而开启定时器前会清除一下. obj.timer 多值同时运动 ...
随机推荐
- Dart
Dart异步与阻塞 import 'dart:async'; import 'dart:io'; void main() async { for(int i = 0;i<10;i++) { as ...
- python2与python3中除法的区别
python2中的除法 >>>1/2 0 即一个整数(无小数部分的数)被另外一个整数除,计算结果的小数部分被截除了,只留下了整数部分 有时候,这个功能比较有用,譬如在做一些需要取位数 ...
- Easy UI combogrid动态加载数据
场景: datagrid的每一行允许编辑,一行中有一个字段,编辑时,提供下拉框选项,供选择. 下拉框选项有多个列.如下图所示:(点击红框内的下拉按钮,会弹出绿框内的内容) 要求: 每行弹出的下拉框内容 ...
- 关于BigDecimal.ROUND_HALF_UP与ROUND_HALF_DOWN
ROUND_HALF_UP: 遇到.5的情况时往上近似,例: 1.5 ->;2ROUND_HALF_DOWN : 遇到.5的情况时往下近似,例: 1.5 ->;1 BigDecimal a ...
- array_push() 与 $arr[]=$value 的使用场景
在只压入一个元素的时候使用 $arr[] = $value 当可以同时压入多个元素的时候推荐使用 array_push. 注:如果是压入一个元素,使用$arr[]=$value效率高,因为可以节省调用 ...
- dll注入遇到CreateRemoteThread()返回错误代码5
在进行dll注入的时候,发现触发了CreateRemoteThread()的错误并返回错误代码5,刚开始以为权限不够,用了管理员权限和加了SetPrivilege()函数提权和用NtCreateThr ...
- 6.1 Pandora 实操 - 数据收集
添加机器 添加机器命令,在 linux 机器上执行此命令 添加成功 添加收集器 采集机器数据 解析数据 转换数据 发送数据 接着,下一步即,成功创建收集任务. 分发机器 确认收集人物,绑定到机器上. ...
- redis数据库通过dump.rdb文件恢复数据库或者数据库迁移
环境:centos7.2软件:redis-3.2.10(yum安装) 情景一:公司之前的redis没有开启aof模式,一直是rdb模式,但是数据又非常重要,数据一点也不能丢失,所以需要开启aof,但是 ...
- 洛谷试炼场 - 关卡1-5 - 简单字符串 - (Done)
P1055 ISBN号码 #include<bits/stdc++.h> using namespace std; string s; ]={','X'}; int main() { ci ...
- kickstart ---无人值守安装
kickstart 实战 http://man.linuxde.net/download/CentOS_6_9镜像 安装: 关闭防火墙 且在编辑虚拟网络的vnet8中要取消使用本地dhcp项 1.yu ...