这是我参与「第四届青训营 」笔记创作活动的的第8天
1.1. 动画函数封装
1.1.1 动画实现原理
核心原理：通过定时器 setInterval() 不断移动盒子位置。
实现步骤：
- 获得盒子当前位置
- 让盒子在当前位置加上1个移动距离
- 利用定时器不断重复这个操作
- 加一个结束定时器的条件
- 注意此元素需要添加定位（position:absolute），才能使用element.style.left
1.1.2 动画函数给不同元素记录不同定时器
如果多个元素都使用这个动画函数，每次都要新var 声明一个定时器。我们可以给不同的元素对象添加对应的定时器方法（自己专门用自己的定时器）好处是：
- 避免每次 var timer 每次都要在内存中开辟新的空间
- 给不同的元素指定了不同的定时器
核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性。
function animate(obj, target) {
// 当我们不断地点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
// 解决方案就是 让我们元素只有一个定时器执行
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() { // 不要写var timer 理由如上
if (obj.offsetLeft >= target) {
clearInterval(obj.timer); // 停止动画（本质是停止定时器）
}
obj.style.left = obj.offsetLeft + 1 + 'px';
}, 30); // 每30ms执行一次
}
1.1.3 缓动效果原理
缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：
- 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
- 核心算法： (目标值 - 现在的位置) / 10 做为每次移动的距离步长
- 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
- 注意步长值需要取整
1.1.4 动画函数多个目标值之间移动
可以让动画函数从 800 移动到 500。
当我们点击按钮时候，判断步长是正值还是负值
1.如果是正值，则步长往大取整
2.如果是负值，则步长往小取整
1.1.5 动函数添加回调函数
回调函数就是一个被作为参数传递的函数
回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。
回调函数写的位置：定时器结束的位置。
1.1.6 动画完整版代码:
将该代码专门放到一个.js文件里，以后需要用到动画效果，直接引入<script src="xxx.js"></script>即可
function animate(obj, target, callback) { // 动画对象、目标位置、回调函数
// console.log(callback); callback = function() {} 调用的时候 callback()
// 先清除以前的定时器，只保留当前的一个定时器执行，否则会越点越快
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
var step = (target - obj.offsetLeft) / 10;
// 把步长值改为整数，不要出现小数的问题，否则最后不能到我们想要的距离
// var step = Math.ceil((target - obj.offsetLeft) / 10);
// 正值，则步长往大取整；负值，则步长往小取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
// 回调函数写到定时器结束里面
// 如果有回调函数才执行，否则不执行
/* if (callback) {
调用函数
callback();
} */
// 上面代码等价于：
callback && callback();
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 15); // 每15ms执行一次
}
1.2. 常见网页特效案例
1.2.1 案例：网页轮播图
轮播图也称为焦点图，是网页中比较常见的网页特效。
功能需求：
1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。
2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。
3.图片播放的同时，下面小圆圈模块跟随一起变化。
4.点击小圆圈，可以播放相应图片。
5.鼠标不经过轮播图，轮播图也会自动播放图片。
6.鼠标经过，轮播图模块， 自动播放停止。
1. 鼠标经过轮播图模块，左右按钮显示
-
因为js较多，我们单独新建js文件夹，再新建js文件， 引入页面中。
-
此时需要添加 load 事件。（页面加载完再加载JS）
-
鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。
-
显示隐藏 display 按钮。
2. 动态生成小圆圈
-
核心思路：小圆圈的个数要跟图片张数一致
-
所以首先先得到ul里面图片的张数（图片放入li里面，所以就是li的个数 ul.children.length）
-
利用循环动态生成小圆圈（这个小圆圈要放入ol里面）
-
创建节点 createElement(‘li’)
-
插入节点 ol. appendChild(li)
-
第一个小圆圈需要添加 current 类（点击之后变色的效果）
3.点击小圆圈滚动图片
-
此时用到animate动画函数，将js文件引入（注意，因为index.js 依赖 animate.js ，所以animate.js 要写到 index.js 上面）
-
使用动画函数的前提，该元素必须有定位
-
注意是ul 移动，而不是小li
-
滚动图片的核心算法： 点击某个小圆圈，就让图片滚动：小圆圈的索引号乘以图片的宽度；
以此作为ul移动距离。
-
此时需要知道小圆圈的索引号， 我们可以在生成小圆圈的时候，给它设置一个自定义属性当做索引号，点击的时候获取这个自定义属性即可。
4. 点击右侧按钮滚动一张
- 如果按钮是a标签做的，先去把按钮标签里面的 href="javascript:;"
- 声明一个变量num， 点击一次，自增1， 让这个变量乘以图片宽度，就是 ul 的滚动距离。
图片无缝滚动原理：
-
- 把ul 第一个li 复制一份，放到ul 的最后面
-
当图片滚动到克隆的最后一张图片时，让 ul 快速的、不做动画的跳到最左侧：即直接把 left 赋值为0
-
同时num 赋值为0，可以从头开始滚动图片了
考虑到先点圆圈再点左/右按钮的情况,当我们点击了某个小圆圈，就要把这个li的索引号给 num（控制移动）
在小圆圈的点击事件末尾处添加以下代码：
num = index;
5.克隆第一张图片
-
利用 var first = ul.children[0].cloneNode(true); 克隆ul 的第一个li 并赋值给一个变量（加true 深克隆，复制里面的子节点；不加或者 false 浅克隆）
-
利用 ul.appendChild(first); 将该变量添加到 ul 最后面
6. 点击右侧按钮， 小圆圈跟着变化
- 最简单的做法是再声明一个变量circle，每次点击自增1。（注意，左侧按钮也需要这个变量，因此要声明全局变量）
- 但是图片有5张，我们小圆圈只有4个少一个，必须加一个判断条件：如果circle == 4 则复原为 0
考虑到先点圆圈再点左/右按钮的情况，当我们点击了某个小圆圈，就要把这个li 的索引号给 circle（控制小圆圈变色）
在小圆圈的点击事件末尾处添加以下代码：
circle = index;
7.点击右侧按钮， 小圆圈跟着变化
- 复制右侧按钮的代码，然后将++改成--
- 特殊情况的距离也对应修改
8. 自动播放功能
-
添加一个定时器
-
自动播放轮播图，实际就类似于点击了右侧按钮
-
此时我们使用手动调用右侧按钮点击事件 arrow_r**.click()**
-
鼠标经过focus 就停止定时器
-
鼠标离开focus 就开启定时器
window.addEventListener('load', function() {
// 获取元素
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
var focusWidth = focusoffsetWidth;
// 1. 鼠标经过focus 就显示左右按钮
focus.addEventListener('mouseenter', function() {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
// 清除定时器变量
clearInterval(timer);
timer = null;
});
// 1. 鼠标离开leave 就隐藏左右按钮
focus.addEventListener('mouseleave', function() {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
//手动调用点击事件
timer = setInterval(function() {
arrow_r.click();
}, 2000);
});
// 2. 动态生成小圆圈 有几张图片，我就生成几个小圆圈
var ul = focus.querySelector('ul');
var ol = focus.querySelector('.circle');
for (var i = 0; i < ul.children.length; i++) {
// 创建一个小li
var li = document.createElement('li');
// 记录当前小圆圈的索引号 通过自定义属性来做
li.setAttribute('index', i);
// 把小li插入到ol 里面
ol.appendChild(li);
// 3. 直接在生成小圆圈的同时绑定点击事件
li.addEventListener('click', function() {
// 干掉所有人：把所有的小li 清除 current 类名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
// 留下我自己：当前的小li 设置current 类名
this.className = 'current';
// 点击小圆圈，移动图片 注意移动的是 ul ，不是li
// ul的移动距离 = 小圆圈的索引号 * 图片的宽度 注意是负值【所以我们要给li加自定义属性做索引号】
// 当我们点击了某个小li 就拿到当前小li 的索引号
var index = this.getAttribute('index');
// 考虑到先点圆圈再点左/右按钮的情况，当我们点击了某个小圆圈，就要把这个li的索引号给 num（控制移动）
num = index;
// 考虑到先点圆圈再点左/右按钮的情况，当我们点击了某个小圆圈，就要把这个li 的索引号给 circle（控制小圆圈变色）
circle = index;
// 以上2步可以统一写成：num = circle = index;
// 动画移动距离记得加负号
animate(ul, -index * focusWidth);
})
}
// 把ol里面的第一个小li设置类名为 current （默认第一个圆圈亮）
ol.children[0].className = 'current';
// 5. 克隆第一张图片(li)放到ul最后面【克隆语句要放在生成小圆圈的后面，否则会多一个圆圈】
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
// 4. 点击右侧按钮
// 定义 num 让图片滚动一张
var num = 0;
// 定义 circle 控制小圆圈的变色
var circle = 0;
// flag 节流阀
var flag = true;
arrow_r.addEventListener('click', function() {
if (flag) { // 将所有代码放置到节流阀里面
flag = false; // 关闭节流阀
// 如果走到了最后复制的一张图片，此时 我们的ul 要快速复原 left 改为 0
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
// 点击右侧按钮，通过num控制图片的滚动
num++;
animate(ul, -num * focusWidth, function() { // 回调函数打开节流阀
flag = true;
});
// 点击右侧按钮，通过circle控制小圆圈随着变色
circle++;
// 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原为0
/* if (circle == ol.children.length) {
circle = 0;
} */
// 可简写为：circle = 三元表达式
circle == ol.children.length ? 0 : circle;
// 调用函数使得对应圆圈亮起来
circleChange();
}
});
// 9. 左侧按钮做法
arrow_l.addEventListener('click', function() {
if (flag) {
flag = false;
if (num == 0) {
num = ul.children.length - 1;
ul.style.left = -num * focusWidth + 'px';
}
num--;
animate(ul, -num * focusWidth, function() {
flag = true;
});
// 点击左侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
circle--;
// 如果circle < 0 说明第一张图片，则小圆圈要改为第4个小圆圈（3）
// if (circle < 0) {
// circle = ol.children.length - 1;
// }
// 可简写为：circle = 三元表达式
circle = circle < 0 ? ol.children.length - 1 : circle;
// 调用函数使得对应圆圈亮起来
circleChange();
}
});
// 点击左/右按钮后的圆圈变色函数：
function circleChange() {
// 先清除其余小圆圈的current类名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
// 留下当前的小圆圈的current类名
ol.children[circle].className = 'current';
}
// 10. 自动播放轮播图
var timer = setInterval(function() {
//手动调用点击事件
arrow_r.click();
}, 2000);
})
1.2.2. 节流阀
目的
防止轮播图按钮连续点击造成播放过快
要求
做法当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。
思路
-
利用回调函数，添加一个变量来控制，锁住函数和解锁函数
开始设置一个变量var flag= true;
-
If(flag){flag = false; do something} 关闭水龙头
利用回调函数动画执行完毕， flag = true 打开水龙头
1.2.3. 案例：返回顶部
- 带有动画的返回顶部
- 此时可以继续使用我们封装的动画函数
- 只需要把所有的left 相关的值改为 跟 页面垂直滚动距离相关就可以了
- 页面滚动了多少，可以通过 window.pageYOffset 得到
- 页面滚动，使用 window.scroll(x,y) 的话会直接跳转，没有动画
//1. 获取元素
var sliderbar = document.querySelector('.slider-bar');
var banner = document.querySelector('.banner');
// banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
var bannerTop = banner.offsetTop
// 当我们侧边栏固定定位之后应该变化的数值
var sliderbarTop = sliderbar.offsetTop - bannerTop;
// 获取main 主体元素
var main = document.querySelector('.main');
var goBack = document.querySelector('.goBack');
var mainTop = main.offsetTop;
// 2. 页面滚动事件 scroll
document.addEventListener('scroll', function() {
// console.log(11);
// window.pageYOffset 页面被卷去的头部
// console.log(window.pageYOffset);
// 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
if (window.pageYOffset >= bannerTop) {
sliderbar.style.position = 'fixed';
sliderbar.style.top = sliderbarTop + 'px';
} else {
sliderbar.style.position = 'absolute';
sliderbar.style.top = '300px';
}
// 4. 当我们页面滚动到main盒子，就显示 goback模块
if (window.pageYOffset >= mainTop) {
goBack.style.display = 'block';
} else {
goBack.style.display = 'none';
}
})
// 3. 当我们点击了返回顶部模块，就让窗口滚动的页面的最上方
goBack.addEventListener('click', function() {
// 里面的x和y 不跟单位的 直接写数字即可
// window.scroll(0, 0); 直接跳转，没有动画
// 因为是窗口滚动 所以对象是window
animate(window, 0);
});
1.2.4. 案例：筋斗云案例
- 利用动画函数做动画效果
- 原先筋斗云的起始位置是0
- 鼠标经过某个小li，把当前小li的offsetLeft 位置做为目标值即可
- 鼠标离开某个小li，就把目标值设为 0
- 如果点击了某个小li， 就把li当前的位置存储起来，做为筋斗云的起始位置
window.addEventListener('load', function() {
// 1. 获取元素
var cloud = document.querySelector('.cloud');
var c_nav = document.querySelector('.c-nav');
var lis = c_nav.querySelectorAll('li');
// 2. 给所有的小li绑定事件
// 这个current 做为筋斗云的起始位置
var current = 0;
for (var i = 0; i < lis.length; i++) {
// (1) 鼠标经过把当前小li 的位置做为目标值
lis[i].addEventListener('mouseenter', function() {
animate(cloud, this.offsetLeft);
});
// (2) 鼠标离开就回到起始的位置
lis[i].addEventListener('mouseleave', function() {
animate(cloud, current);
});
// (3) 当我们鼠标点击，就把当前位置做为目标值
lis[i].addEventListener('click', function() {
current = this.offsetLeft;
});
}
})
