### 缓冲运动
- 逐渐变慢，最后停止
- 距离越大速度越大，**速度取整**
- 速度由距离决定
- 速度 = (目标值-当前值)/缩放系数
- `Math.ceil`：向上取整
- `Math.floor`：向下取整
- 例子：缓冲菜单
- Bug：速度取整 `Math.ceil`、`Math.floor`
- 跟随页面滚动的缓冲侧边栏
- 潜在问题：目标不是整数时
- 目标取整：`parseInt()`
- ` scrollTop = document.documentElement.scrollTop || document.body.scrollTop;`
- `document.documentElement.scrollTop`：IE、Firefox
- `document.body.scrollTop`：chrome
- `Math.random()`
- 返回一个等于0小于1的一个随机浮点数
- 说明：求 n到 m之间的**随机整数的公式**
- `random = Math.floor(Math.random()*(m-n+1)+n)`
- 代码：
```HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="../reset.css">
<title>缓冲运动及停止条件</title>
<style>
body {
width: 800px;
height: 2000px;
}
#div1 {
width: 150px;
height: 400px;
background-color:cyan;
position: absolute;
left: -150px;
}
#div1 span {
width: 20px;
height: 60px;
left: 150px;
background-color:rgb(106, 176, 255);
position: absolute;
margin-top: 170px;
}
#div2 {
top: 50px;
left: 150px;
position: absolute;
filter:alpha(opacity=30);
opacity: 0.3;
width: 140px;
height: 140px;
background-color: red;
}
#div3 {
width: 100px;
height: 200px;
background: rgb(99, 128, 255);
position: absolute;
right: 0px;
bottom: 0px;
}
#div4 {
width: 298px;
height: 198px;
border: rgb(0, 0, 0) solid 1px;
position: absolute;
left: 100px;
}
</style>
<script>
window.onload = function () {
// 封装getElementById
function get(id) {
return document.getElementById(id);
};
var oDiv = get('div1');
var timer = '';
// 注册鼠标移入事件
oDiv.onmouseover = function () {
startMove(0, oDiv);
};
oDiv.onmouseout = function () {
startMove(-150, oDiv);
};
// 图片淡入淡出
var oDiv2 = get('div2');
var alpha = 30;
oDiv2.onmouseover = function () {
shallow(100);
}
oDiv2.onmouseout = function () {
shallow(30);
}
// 变浅函数
function shallow(target) {
clearInterval(timer);
timer = setInterval(shallowMove, 30);
function shallowMove() {
speed = (target - alpha)/7;
if (alpha === target) {
clearInterval(timer);
} else if (alpha < target) {
alpha += speed;
oDiv2.style.filter = 'alpha(opacity='+ Math.ceil(alpha) +')';
oDiv2.style.opacity = Math.ceil(alpha)/100;
} else if (alpha > target) {
alpha += speed;
oDiv2.style.filter = 'alpha(opacity='+ Math.floor(alpha) +')';
oDiv2.style.opacity = Math.floor(alpha)/100;
}
}
}
// 跟随页面滚动的缓冲侧边栏
var oDiv3 = get('div3');
window.onscroll = function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var target = parseInt((document.documentElement.clientHeight - oDiv3.offsetHeight)/2 + scrollTop);
scrollMove(target);
console.log(
'可视区：', document.documentElement.clientHeight,
'滚动距离：', scrollTop,
'div3的高度：', oDiv3.offsetHeight,
'目标值：', target)
}
// 纵向运动函数
function scrollMove(target) {
clearInterval(timer);
timer = setInterval(scrollMoving, 30);
function scrollMoving() {
var speed = (target - oDiv3.offsetTop)/7;
if (oDiv3.offsetTop === target) {
clearInterval(timer);
} else if (oDiv3.offsetTop > target) {
oDiv3.style.top = oDiv3.offsetTop + Math.floor(speed) + 'px';
} else if (oDiv3.offsetTop < target) {
oDiv3.style.top = oDiv3.offsetTop + Math.ceil(speed) + 'px';
}
}
}
// 运动停止的条件
var btn1 = get('btn1');
var btn2 = get('btn2');
var btn3 = get('btn3');
var btn4 = get('btn4');
btn1.onclick = function () {
startMove(100, oDiv2);
}
btn2.onclick = function () {
startMove(400, oDiv2);
}
btn3.onclick = function () {
startMove2(100, oDiv2);
}
btn4.onclick = function () {
startMove2(400, oDiv2);
}
// 横向缓冲运动框架
function startMove(target, div) {
clearInterval(timer);
timer = setInterval(move, 30);
function move() {
speed = (target - div.offsetLeft)/9;
if (div.offsetLeft < target) {
div.style.left = div.offsetLeft + Math.ceil(speed) + 'px';
} else if (div.offsetLeft > target) {
div.style.left = div.offsetLeft + Math.floor(speed) + 'px';
} else if (div.offsetLeft === target){
clearInterval(timer);
}
}
}
// 横向匀速运动框架
function startMove2(target, div) {
clearInterval(timer);
timer = setInterval(move2, 30);
function move2() {
// speed正向
if (div.offsetLeft <= target) {
speed = 9;
moving();
}
// speed反向
else if (div.offsetLeft >= target) {
speed = -9;
moving();
}
function moving() {
if (Math.abs(target - div.offsetLeft) <= Math.abs(speed)) {
div.style.left = target + 'px'; // 直接到达
clearInterval(timer); // 停止
} else {
div.style.left = div.offsetLeft + speed + 'px';
}
}
}
}
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
<div id="div2"><img src="images/0.png" alt=""></div>
<div id="div3"></div>
<div id="div4">
<input type="button" name="" id="btn1" value="减速到100px">
<input type="button" name="" id="btn2" value="减速到400px">
<input type="button" name="" id="btn3" value="匀速到100px">
<input type="button" name="" id="btn4" value="匀速到400px">
</div>
</div>
</body>
</html>
```
- 前言
- 初探 JavaScript 魅力
- JavsScript 是什么
- 第一个 JS 特效：鼠标提示框
- 网页换肤和 if 判断
- 函数传参
- 循环 while 和 for
- 导航栏选项卡
- JS 简易日历
- JavaScript 基础
- JavaScript 组成
- 变量类型
- 变量类型转换
- 变量的作用域和闭包
- 命名规范
- 运算符
- 程序流程控制
- JSON
- 深入 JavaScript
- 函数返回值
- 函数传参与行间样式
- 数组基础操作
- 定时器的使用
- 定时器的作用
- 数码时钟
- Date 对象其它方法
- 延时提示框
- 无缝滚动
- DOM基础应用
- DOM 基础
- DOM 节点
- 操作元素属性
- DOM 元素灵活查找
- DOM 操作应用
- 创建、插入和删除元素
- 文档碎片
- DOM操作应用高级
- 表格标签
- 表格应用
- 表单应用
- JS 运动基础
- 运动基础
- 运动框架及应用
- 缓冲运动
- 运动的停止条件
- JS 运动应用
- 多物体运动框架
- 任意值运动框架
- 仿 Flash 图片展示
- JS 运动中级
- 链式运动框架
- 完美运动框架
- 运动框架总结
- 运动框架应用
- JS事件基础
- Event 对象和事件
- 鼠标事件
- 键盘事件
- JS 事件中级
- 默认事件
- 拖拽
- JS 事件高级应用
- 事件绑定
- 高级拖拽
- 自定义滚动条
- Ajax 基础
- Ajax 是什么
- 使用 Ajax
- Ajax 原理
- Ajax 中级
- 编写 Ajax
- Ajax 数据
- JS 面对对象基础
- 面对对象是什么
- JS 中的面对对象
- 第一个面对对象的程序
- 工厂方式
- 原型：Prototype
- 面对对象编程方式
- JS 面对对象实例
- 面对对象的选项卡
- JS 面对对象高级
- Json 方式的面向对象
- 拖拽和继承
- 使用继承
- 系统对象
- BOM 应用
- BOM 基础
- 尺寸及坐标
- 常用方法和事件
- COOKIE 基础与应用
- 什么是 cookie
- 使用 cookie
- JS 中的正则表达式
- 正则表达式基础
- 字符串与正则配合
- 字符串
- 量词
- 常用正则例子
- JS Template 模板引擎
- 特性
- 语法
- 实例
- 表达式和运算符分类
- 主要表达式
- 左表达式
- 自增和自减
- 一元运算符
- 算术运算符
- 关系运算符
- 相等运算符
- 位移运算符
- 二进制位运算符
- 二元逻辑运算符
- 条件(三元)运算符
- 赋值运算符