update: scroll 相关属性
This commit is contained in:
qianguyihao
parent
2a75b5fd8c
commit
56def7a894
@ -121,7 +121,7 @@ js中有一套方便的**获取元素尺寸**的办法就是offset家族。offse
|
||||
|
||||
`offsetTop`：当前元素相对于其**定位父元素**的垂直偏移量。
|
||||
|
||||
备注：从父亲的 padding 开始算起，父亲的 border 不算。
|
||||
备注：从父亲的 padding 开始算起，父亲的 border 不算在内。
|
||||
|
||||
举例：
|
||||
|
||||
@ -180,7 +180,7 @@ js中有一套方便的**获取元素尺寸**的办法就是offset家族。offse
|
||||
|
||||
offsetLeft 可以返回无定位父元素的偏移量。如果父元素中都没有定位，则body为准。
|
||||
|
||||
style.left 只能获取行内样式，如果父元素中都没有定位，则返回""（意思是，返回空）;
|
||||
style.left 只能获取行内样式，如果父元素中都没有设置定位，则返回""（意思是，返回空字符串）;
|
||||
|
||||
（2）offsetTop 返回的是数字，而 style.top 返回的是字符串，而且还带有单位：px。
|
||||
|
||||
@ -196,8 +196,6 @@ div.style.left = "100px";
|
||||
（3）offsetLeft 和 offsetTop **只读**，而 style.left 和 style.top 可读写（只读是获取值，可写是修改值）
|
||||
|
||||
|
||||
（4）如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。
|
||||
|
||||
总结：我们一般的做法是：**用offsetLeft 和 offsetTop 获取值，用style.left 和 style.top 赋值**（比较方便）。理由如下：
|
||||
|
||||
- style.left：只能获取行内式，获取的值可能为空，容易出现NaN。
|
||||
|
||||
@ -1,179 +1,18 @@
|
||||
|
||||
|
||||
## 缓动动画
|
||||
|
||||
### 三个函数
|
||||
|
||||
缓慢动画里，我们要用到三个函数，这里先列出来：
|
||||
|
||||
- Math.ceil() 向上取整
|
||||
|
||||
- Math.floor() 向下取整
|
||||
|
||||
- Math.round(); 四舍五入
|
||||
|
||||
|
||||
### 缓动动画的原理
|
||||
|
||||
缓动动画的原理就是：在移动的过程中，步长越来越小。
|
||||
|
||||
设置步长为**：目标位置和盒子当前位置的十分之一**。用公式表达，即：
|
||||
|
||||
```
|
||||
盒子位置 = 盒子本身位置 + (目标位置 - 盒子本身位置)/ 10；
|
||||
```
|
||||
|
||||
代码举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: pink;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<button>运动到left = 400px</button>
|
||||
<div></div>
|
||||
|
||||
<script>
|
||||
|
||||
var btn = document.getElementsByTagName("button")[0];
|
||||
var div = document.getElementsByTagName("div")[0];
|
||||
|
||||
btn.onclick = function () {
|
||||
setInterval(function () {
|
||||
//动画原理：盒子未来的位置 = 盒子当前的位置+步长
|
||||
div.style.left = div.offsetLeft + (400 - div.offsetLeft) / 10 + "px";
|
||||
}, 30);
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
### 缓慢动画的封装（解决四舍五入的问题）
|
||||
|
||||
我们发现一个问题，上图中的盒子最终并没有到达400px的位置，而是只到了396.04px就停住了：
|
||||
|
||||
|
||||
|
||||
原因是：JS在取整的运算时，进行了四舍五入。
|
||||
|
||||
我们把打印396.04px这个left值打印出来看看：
|
||||
|
||||
|
||||
|
||||
我么发现，通过`div.style.left`获取的值是精确的，通过`div.offsetLeft`获取的left值会进行四舍五入。
|
||||
|
||||
此时，我们就要用到取整的函数了。
|
||||
|
||||
通过对缓动动画进行封装，完整版的代码实现如下：
|
||||
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: pink;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<button>运动到200</button>
|
||||
<button>运动到400</button>
|
||||
<div></div>
|
||||
|
||||
<script>
|
||||
|
||||
var btn = document.getElementsByTagName("button");
|
||||
var div = document.getElementsByTagName("div")[0];
|
||||
|
||||
btn[0].onclick = function () {
|
||||
animate(div, 200);
|
||||
}
|
||||
|
||||
btn[1].onclick = function () {
|
||||
animate(div, 400);
|
||||
}
|
||||
|
||||
//缓动动画封装
|
||||
function animate(ele, target) {
|
||||
//要用定时器，先清定时器
|
||||
//一个萝卜一个坑儿，一个元素对应一个定时器
|
||||
clearInterval(ele.timer);
|
||||
//定义定时器
|
||||
ele.timer = setInterval(function () {
|
||||
//获取步长
|
||||
//步长应该是越来越小的，缓动的算法。
|
||||
var step = (target - ele.offsetLeft) / 10;
|
||||
//对步长进行二次加工(大于0向上取整,小于0向下取整)
|
||||
//达到的效果是：最后10像素的时候都是1像素1像素的向目标位置移动，就能够到达指定位置。
|
||||
step = step > 0 ? Math.ceil(step) : Math.floor(step);
|
||||
//动画原理： 目标位置 = 当前位置 + 步长
|
||||
ele.style.left = ele.offsetLeft + step + "px";
|
||||
console.log(step);
|
||||
//检测缓动动画有没有停止
|
||||
console.log("smyhvae");
|
||||
if (Math.abs(target - ele.offsetLeft) <= Math.abs(step)) {
|
||||
//处理小数赋值
|
||||
ele.style.left = target + "px";
|
||||
clearInterval(ele.timer);
|
||||
}
|
||||
}, 30);
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
实现效果：
|
||||
|
||||
|
||||
|
||||
|
||||
## scroll 家族的组成
|
||||
## scroll 相关属性
|
||||
|
||||
当我们用鼠标滚轮，滚动网页的时候，会触发window.onscroll()方法。效果如下：（注意看控制台的打印结果）
|
||||
|
||||
|
||||
|
||||
|
||||
### 1、ScrollWidth 和 scrollHeight
|
||||
|
||||
获取盒子的宽高。调用者为节点元素。不包括 border和margin。如下：
|
||||
`ScrollWidth` 和 `scrollHeight`：获取元素**整个滚动区域**的宽、高。包括 width 和 padding，不包括 border和margin。
|
||||
|
||||
- scrollWidth = width + padding;
|
||||
|
||||
- scrollHeight = height + padding;
|
||||
**注意**：`scrollHeight` 的特点是：如果内容超出了盒子，`scrollHeight`为内容的高（包括超出的内容）；如果不超出，`scrollHeight`为盒子本身的高度。`ScrollWidth`同理。
|
||||
|
||||
scrollHeight有一个特点：如果文字超出了盒子，高度为内容的高（包括超出的内容）；不超出，则是盒子本身高度。
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -205,8 +44,8 @@ scrollHeight有一个特点：如果文字超出了盒子，高度为内容的
|
||||
|
||||
var div = document.getElementsByTagName("div")[0];
|
||||
|
||||
//scrollHeight有一个特点：如果文字超出了盒子，高度为内容的高（包括超出的内容）；不超出，则是盒子本身高度。
|
||||
//IE8以下（不包括IE8），为盒子本身内容的多少。
|
||||
// `scrollHeight` 的特点是：如果内容超出了盒子，`scrollHeight`为内容的高（包括超出的内容）；如果不超出，`scrollHeight`为盒子本身的高度。
|
||||
//IE8以下（不包括IE8），为盒子本身内容的高度。
|
||||
console.log(div.scrollWidth);
|
||||
console.log(div.scrollHeight);
|
||||
|
||||
@ -221,9 +60,19 @@ scrollHeight有一个特点：如果文字超出了盒子，高度为内容的
|
||||
|
||||
### 2、scrollTop 和 scrollLeft
|
||||
|
||||
网页被卷去的头部和左边的部分。
|
||||
- `scrollLeft`：获取水平滚动条滚动的距离。
|
||||
|
||||
比如说，一个网页往上滚动的时候，上面的部分自然被浏览器遮挡了，遮挡的高度就是scrollTop。
|
||||
- `scrollTop`：获取垂直滚动条滚动的距离。
|
||||
|
||||
**实战经验**：
|
||||
|
||||
当某个元素满足`scrollHeight - scrollTop == clientHeight`时，说明垂直滚动条滚动到底了。
|
||||
|
||||
当某个元素满足`scrollWidth - scrollLeft == clientWidth`时，说明水平滚动条滚动到底了。
|
||||
|
||||
这个实战经验非常有用，可以用来判断用户是否已经将内容滑动到底了。比如说，有些场景下，希望用户能够看完“活动规则”，才允许触发接下来的表单操作。
|
||||
|
||||
### scrollTop 的兼容性
|
||||
|
||||
scrollTop 这个属性的写法要注意兼容性，如下。
|
||||
|
||||
@ -483,12 +332,166 @@ function scroll() { // 开始封装自己的scrollTop
|
||||
- 2018-02-03-scrollTop固定导航栏.rar
|
||||
|
||||
|
||||
|
||||
## 缓动动画
|
||||
|
||||
### 三个函数
|
||||
|
||||
缓慢动画里，我们要用到三个函数，这里先列出来：
|
||||
|
||||
- Math.ceil() 向上取整
|
||||
|
||||
- Math.floor() 向下取整
|
||||
|
||||
- Math.round(); 四舍五入
|
||||
|
||||
### 缓动动画的原理
|
||||
|
||||
缓动动画的原理就是：在移动的过程中，步长越来越小。
|
||||
|
||||
设置步长为：**目标位置和盒子当前位置的十分之一**。用公式表达，即：
|
||||
|
||||
```
|
||||
盒子位置 = 盒子本身位置 + (目标位置 - 盒子本身位置)/ 10；
|
||||
```
|
||||
|
||||
代码举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: pink;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<button>运动到left = 400px</button>
|
||||
<div></div>
|
||||
|
||||
<script>
|
||||
|
||||
var btn = document.getElementsByTagName("button")[0];
|
||||
var div = document.getElementsByTagName("div")[0];
|
||||
|
||||
btn.onclick = function () {
|
||||
setInterval(function () {
|
||||
//动画原理：盒子未来的位置 = 盒子当前的位置+步长
|
||||
div.style.left = div.offsetLeft + (400 - div.offsetLeft) / 10 + "px";
|
||||
}, 30);
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
### 缓慢动画的封装（解决四舍五入的问题）
|
||||
|
||||
我们发现一个问题，上图中的盒子最终并没有到达400px的位置，而是只到了396.04px就停住了：
|
||||
|
||||
|
||||
|
||||
原因是：JS在取整的运算时，进行了四舍五入。
|
||||
|
||||
我们把打印396.04px这个left值打印出来看看：
|
||||
|
||||
|
||||
|
||||
我么发现，通过`div.style.left`获取的值是精确的，通过`div.offsetLeft`获取的left值会进行四舍五入。
|
||||
|
||||
此时，我们就要用到取整的函数了。
|
||||
|
||||
通过对缓动动画进行封装，完整版的代码实现如下：
|
||||
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: pink;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<button>运动到200</button>
|
||||
<button>运动到400</button>
|
||||
<div></div>
|
||||
|
||||
<script>
|
||||
|
||||
var btn = document.getElementsByTagName("button");
|
||||
var div = document.getElementsByTagName("div")[0];
|
||||
|
||||
btn[0].onclick = function () {
|
||||
animate(div, 200);
|
||||
}
|
||||
|
||||
btn[1].onclick = function () {
|
||||
animate(div, 400);
|
||||
}
|
||||
|
||||
//缓动动画封装
|
||||
function animate(ele, target) {
|
||||
//要用定时器，先清定时器
|
||||
//一个萝卜一个坑儿，一个元素对应一个定时器
|
||||
clearInterval(ele.timer);
|
||||
//定义定时器
|
||||
ele.timer = setInterval(function () {
|
||||
//获取步长
|
||||
//步长应该是越来越小的，缓动的算法。
|
||||
var step = (target - ele.offsetLeft) / 10;
|
||||
//对步长进行二次加工(大于0向上取整,小于0向下取整)
|
||||
//达到的效果是：最后10像素的时候都是1像素1像素的向目标位置移动，就能够到达指定位置。
|
||||
step = step > 0 ? Math.ceil(step) : Math.floor(step);
|
||||
//动画原理： 目标位置 = 当前位置 + 步长
|
||||
ele.style.left = ele.offsetLeft + step + "px";
|
||||
console.log(step);
|
||||
//检测缓动动画有没有停止
|
||||
console.log("smyhvae");
|
||||
if (Math.abs(target - ele.offsetLeft) <= Math.abs(step)) {
|
||||
//处理小数赋值
|
||||
ele.style.left = target + "px";
|
||||
clearInterval(ele.timer);
|
||||
}
|
||||
}, 30);
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
实现效果：
|
||||
|
||||
|
||||
|
||||
|
||||
## window.scrollTo()方法举例：返回到顶部小火箭
|
||||
|
||||
（1）index.html：
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
@ -640,7 +643,6 @@ function scroll() { // 开始封装自己的scrollTop
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
（2）tools.js:
|
||||
|
||||
```javascript
|
||||
@ -671,495 +673,10 @@ function scroll() { // 开始封装自己的scrollTop
|
||||
|
||||
```
|
||||
|
||||
|
||||
实现效果：
|
||||
|
||||
|
||||
|
||||
|
||||
小火箭的图片资源：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## window.scrollTo()方法举例：楼层跳跃（暂略）
|
||||
|
||||
|
||||
## 缓动框架封装
|
||||
|
||||
### 1、缓动框架封装：同时设置多个属性
|
||||
|
||||
这里我们通过`window.getComputedStyle`的方式获取属性值。
|
||||
|
||||
**完整代码如下：**
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 10px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: pink;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button>运动到json中设置的位置</button>
|
||||
<div></div>
|
||||
|
||||
<script>
|
||||
|
||||
var btnArr = document.getElementsByTagName("button");
|
||||
var div = document.getElementsByTagName("div")[0];
|
||||
|
||||
btnArr[0].onclick = function () {
|
||||
var json = {"left": 100, "top": 200, "width": 300, "height": 300};
|
||||
animate(div, json);
|
||||
}
|
||||
|
||||
//参数变为3个
|
||||
function animate(ele, json) {
|
||||
//先清定时器
|
||||
clearInterval(ele.timer);
|
||||
ele.timer = setInterval(function () {
|
||||
//遍历属性和值，分别单独处理json
|
||||
//attr == key(键) target == json[key](值)
|
||||
for (var key in json) {
|
||||
//四部
|
||||
var current = parseInt(getStyle(ele, key)) || 0;
|
||||
//1.获取步长
|
||||
var step = (json[key] - current) / 10;
|
||||
//2.二次加工步长
|
||||
step = step > 0 ? Math.ceil(step) : Math.floor(step);
|
||||
current = current + step;
|
||||
//3.赋值
|
||||
ele.style[key] = current + "px";
|
||||
console.log(1);
|
||||
//4.清除定时器
|
||||
// if(Math.abs(json[key]-current)<=Math.abs(step)){
|
||||
// ele.style[key] = json[key] + "px";
|
||||
// clearInterval(ele.timer);
|
||||
// }
|
||||
}
|
||||
}, 25);
|
||||
}
|
||||
|
||||
//兼容方法获取元素样式
|
||||
function getStyle(ele, attr) {
|
||||
if (window.getComputedStyle) {
|
||||
return window.getComputedStyle(ele, null)[attr];
|
||||
}
|
||||
return ele.currentStyle[attr];
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
实现效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 2、上方的代码改进：清除定时器
|
||||
|
||||
上方的代码中，我们还需做一下清除定时器的判断：只有所有的参数都到达指定位置了，我们就清除定时器。
|
||||
|
||||
完整版代码如下：
|
||||
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 10px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: pink;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button>运动到json中设置的位置</button>
|
||||
<div></div>
|
||||
|
||||
<script>
|
||||
|
||||
var btnArr = document.getElementsByTagName("button");
|
||||
var div = document.getElementsByTagName("div")[0];
|
||||
|
||||
btnArr[0].onclick = function () {
|
||||
var json = {"left": 100, "top": 200, "width": 300, "height": 300};
|
||||
animate(div, json);
|
||||
}
|
||||
|
||||
//参数变为3个
|
||||
function animate(ele, json) {
|
||||
//先清定时器
|
||||
clearInterval(ele.timer);
|
||||
ele.timer = setInterval(function () {
|
||||
//开闭原则
|
||||
var bool = true;
|
||||
|
||||
//遍历属性和值，分别单独处理json
|
||||
//attr == key(键) target == json[key](值)
|
||||
for (var key in json) {
|
||||
//四部
|
||||
var current = parseInt(getStyle(ele, key)) || 0;
|
||||
//1.获取步长
|
||||
var step = (json[key] - current) / 10;
|
||||
//2.二次加工步长
|
||||
step = step > 0 ? Math.ceil(step) : Math.floor(step);
|
||||
current = current + step;
|
||||
//3.赋值
|
||||
ele.style[key] = current + "px";
|
||||
//4.清除定时器
|
||||
//判断: 目标值和当前值的差大于步长，就不能跳出循环
|
||||
//不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
|
||||
if (json[key] !== current) {
|
||||
bool = false;
|
||||
}
|
||||
}
|
||||
|
||||
console.log(1);
|
||||
//只有所有的属性都到了指定位置，bool值才为true；
|
||||
if (bool) {
|
||||
clearInterval(ele.timer);
|
||||
}
|
||||
}, 25);
|
||||
}
|
||||
|
||||
//兼容方法获取元素样式
|
||||
function getStyle(ele, attr) {
|
||||
if (window.getComputedStyle) {
|
||||
return window.getComputedStyle(ele, null)[attr];
|
||||
}
|
||||
return ele.currentStyle[attr];
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
运行效果同上。
|
||||
|
||||
|
||||
**### 3、进一步深入：如果有要同时执行讴多个动画时，就要用到回调函数（重要）**：
|
||||
|
||||
上面的代码中，我们要做的动画是：
|
||||
|
||||
```javascript
|
||||
btnArr[0].onclick = function () {
|
||||
var json = {"left": 100, "top": 200, "width": 300, "height": 300};
|
||||
animate(div, json);
|
||||
}
|
||||
```
|
||||
|
||||
上面的代码是执行这一个动画，可如果要同时执行两个动画呢？一般人自然想到的是下面的写法：（错误的写法）
|
||||
|
||||
|
||||
```javascript
|
||||
btnArr[0].onclick = function () {
|
||||
var json1 = {"left": 100, "top": 200, "width": 300, "height": 300};
|
||||
var json2 = {"left": 200, "top": 10, "width": 150, "height": 150};
|
||||
animate(div, json1);
|
||||
animate(div, json2);
|
||||
}
|
||||
```
|
||||
|
||||
但是这样写的话，第二个动画 json2 会把第一个动画 json1 **层叠掉**。也就是说，第一个动画直接就不执行了。效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
这显然不是我们想看到的。
|
||||
|
||||
如果我们想先执行第一个动画fn1()，再执行第二个动画fn2()的话，就要用到**回调函数**。意思是，将第二个动画fn2()作为回调函数即可。
|
||||
|
||||
完整版代码如下：
|
||||
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 10px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: pink;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button>运动到 json 设置的位置</button>
|
||||
<div></div>
|
||||
|
||||
<script>
|
||||
|
||||
var btnArr = document.getElementsByTagName("button");
|
||||
var div = document.getElementsByTagName("div")[0];
|
||||
|
||||
btnArr[0].onclick = function () {
|
||||
var json1 = {"left": 100, "top": 200, "width": 300, "height": 300};
|
||||
var json2 = {"left": 300, "top": 10, "width": 100, "height": 100};
|
||||
|
||||
animate(div, json1, function () { //第三个参数是回调，可以保证json1的动画执行结束后，再执行json2的动画
|
||||
animate(div, json2);
|
||||
})
|
||||
}
|
||||
|
||||
//带有回调的动画封装
|
||||
function animate(ele, json, fn) {
|
||||
//先清定时器
|
||||
clearInterval(ele.timer);
|
||||
ele.timer = setInterval(function () {
|
||||
//开闭原则
|
||||
var bool = true;
|
||||
|
||||
|
||||
//遍历属性和值，分别单独处理json
|
||||
//attr == key(键) target == json[key](值)
|
||||
for (var key in json) {
|
||||
//四部
|
||||
var current = parseInt(getStyle(ele, key)) || 0;
|
||||
//1.获取步长
|
||||
var step = (json[key] - current) / 10;
|
||||
//2.二次加工步长
|
||||
step = step > 0 ? Math.ceil(step) : Math.floor(step);
|
||||
current = current + step;
|
||||
//3.赋值
|
||||
ele.style[key] = current + "px";
|
||||
//4.清除定时器
|
||||
//判断: 目标值和当前值的差大于步长，就不能跳出循环
|
||||
//不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
|
||||
if (json[key] !== current) {
|
||||
bool = false;
|
||||
}
|
||||
}
|
||||
|
||||
console.log(1);
|
||||
//只有所有的属性都到了指定位置，bool值才不会变成false；
|
||||
if (bool) {
|
||||
clearInterval(ele.timer); //定时器结束，代表第一个函数fn1()执行完毕了，接下来可以执行回调函数fn2()了。
|
||||
//只有传递了回调函数，才能执行
|
||||
if (fn) { //【重要】第一个函数执行完毕了，定时器也清除了。现在，如果有人送了fn()这个回调函数过来，那就执行fn()
|
||||
fn(); // 函数名+()：执行该函数
|
||||
}
|
||||
}
|
||||
}, 25);
|
||||
}
|
||||
|
||||
//兼容方法获取元素样式
|
||||
function getStyle(ele, attr) {
|
||||
if (window.getComputedStyle) {
|
||||
return window.getComputedStyle(ele, null)[attr];
|
||||
}
|
||||
return ele.currentStyle[attr];
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
上方代码中，如果我们要先后完成两个动画，执行的代码是：
|
||||
|
||||
|
||||
```javascript
|
||||
animate(div, json1, function () { //第三个参数是回调，可以保证json1的动画执行结束后，再执行json2的动画
|
||||
animate(div, json2);
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
如果想要先后执行两个动画，那就以此类推：
|
||||
|
||||
```javascript
|
||||
animate(div, json1, function () { //第三个参数是回调，可以保证json1的动画执行结束后，再执行json2的动画
|
||||
animate(div, json2,function () {
|
||||
animate(div,json3);
|
||||
});
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
**举例：仿360的右下角开机效果**
|
||||
|
||||
代码实现：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
.box {
|
||||
width: 322px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.onload = function () {
|
||||
//需求：下面的盒子高先变为0，然后上面的大盒子的宽再变为0.
|
||||
var guanbi = document.getElementById("guanbi");
|
||||
var box = guanbi.parentNode;
|
||||
var b = document.getElementById("b");
|
||||
|
||||
guanbi.onclick = function () {
|
||||
//下面的盒子高度变为0，然后大盒子的宽在变为0.
|
||||
animate(b, {"height": 0}, function () {
|
||||
animate(box, {"width": 0});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//封装好的动画函数
|
||||
function animate(ele, json, fn) {
|
||||
//先清定时器
|
||||
clearInterval(ele.timer);
|
||||
ele.timer = setInterval(function () {
|
||||
//开闭原则
|
||||
var bool = true;
|
||||
|
||||
|
||||
//遍历属性和值，分别单独处理json
|
||||
//attr == key(键) target == json[key](值)
|
||||
for (var key in json) {
|
||||
//四部
|
||||
var current = parseInt(getStyle(ele, key)) || 0;
|
||||
//1.获取步长
|
||||
var step = (json[key] - current) / 10;
|
||||
//2.二次加工步长
|
||||
step = step > 0 ? Math.ceil(step) : Math.floor(step);
|
||||
current = current + step;
|
||||
//3.赋值
|
||||
ele.style[key] = current + "px";
|
||||
//4.清除定时器
|
||||
//判断: 目标值和当前值的差大于步长，就不能跳出循环
|
||||
//不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
|
||||
if (json[key] !== current) {
|
||||
bool = false;
|
||||
}
|
||||
}
|
||||
|
||||
console.log(1);
|
||||
//只有所有的属性都到了指定位置，bool值才不会变成false；
|
||||
if (bool) {
|
||||
clearInterval(ele.timer);
|
||||
//所有程序执行完毕了，现在可以执行回调函数了
|
||||
//只有传递了回调函数，才能执行
|
||||
if (fn) {
|
||||
fn();
|
||||
}
|
||||
}
|
||||
}, 1);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取元素样式兼容写法
|
||||
* @param ele
|
||||
* @param attr
|
||||
* @returns {*}
|
||||
*/
|
||||
function getStyle(ele, attr) {
|
||||
if (window.getComputedStyle) {
|
||||
return window.getComputedStyle(ele, null)[attr];
|
||||
}
|
||||
return ele.currentStyle[attr];
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<span id="guanbi"></span>
|
||||
<div class="hd" id="t">
|
||||
<img src="images/1.jpg" alt=""/>
|
||||
</div>
|
||||
<div class="bd" id="b">
|
||||
<img src="images/2.jpg" alt=""/>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
工程文件：
|
||||
|
||||
- 2018-02-04-仿360开机效果.rar
|
||||
|
||||
|
||||
|
||||
### 4、对 opacity和 z-index 属性进行单独改进
|
||||
|
||||
我们以上的代码中，如果要进行动画参数的设置，是直接把参数放到json里面去的。例如：
|
||||
|
||||
```javascript
|
||||
var json1 = {"left": 100, "top": 200, "width": 300, "height": 300};
|
||||
var json2 = {"left": 300, "top": 10, "width": 100, "height": 100};
|
||||
```
|
||||
|
||||
可是，下面这两个属性，却不能这样放到json里，会出现兼容性的问题：
|
||||
|
||||
|
||||
```
|
||||
opacity: 0.5; //透明度
|
||||
z-index: 1;
|
||||
```
|
||||
|
||||
|
||||
如何改进呢？暂略。
|
||||
|
||||
Loading…
Reference in New Issue
Block a user