案例分析
本案例目的实现以下三种效果:
- 鼠标经过某个小 li , 筋斗云跟这到当前小 li 位置;
- 鼠标离开这个小 li ,筋斗云复原为原来的位置;
- 鼠标点击了某个小 li ,筋斗云就会留在点击的这个小 li 的位置
因此
① 可以采用动画函数进行制作这个效果
② 先设定筋斗云起始的位置为 0
③ 鼠标经过某个小 li ,就把当前的小 li 的 offsetLeft 位置作为目标值
④ 鼠标离开这个小 li ,就把目标值设为0
⑤ 如果点击了某个小 li ,就把当前的位置存起来,作为筋斗云的起始位置
JS部分的代码:
<script>
window.addEventListener('load', function () {
// 1. 获取元素
var cloud = document.querySelector('.cloud');
var nav = document.querySelector('.nav');
var lis = document.querySelectorAll('li');
// 2.鼠标经过和离开 给所有的小 li 绑定事件
var current = 0;
for (var i = 0; i < lis.length; i++) {
// 鼠标经过
lis[i].addEventListener('mouseenter', function () {
animate(cloud, this.offsetLeft);
});
// 鼠标离开
lis[i].addEventListener('mouseleave', function () {
animate(cloud, current);
});
// 当鼠标点击到某个 li 就以这个 li 的offsetLeft为起始位置
lis[i].addEventListener('click', function () {
current = this.offsetLeft;
});
}
});
</script>
最后的效果如下:
★★★ 欢迎批评指正!