筋斗云案例

最新推荐文章于 2022-04-11 14:28:27 发布

Just-Lsy

最新推荐文章于 2022-04-11 14:28:27 发布

阅读量674

点赞数 1

分类专栏：笔记文章标签： javascript ecmascript 前端 html

本文链接：https://blog.csdn.net/m0_59030524/article/details/123461088

版权

本文档介绍了如何实现一个筋斗云跟随鼠标效果的前端功能。当鼠标经过、离开和点击页面上的小元素时，筋斗云会相应地移动到特定位置。实现主要依赖于动画函数，通过设置目标位置来更新筋斗云的位置。

摘要由CSDN通过智能技术生成

1. 效果

鼠标经过某个小 li，筋斗云跟这到当前小 li 位置
鼠标离开这个小 li，筋斗云复原为原来的位置
鼠标点击了某个小 li，筋斗云就会留在点击这个小 li 的位置

2. 实现

利用动画函数做动画效果
原先筋斗云的起始位置是 0
鼠标经过某个小 li，把当前小 li 的 offsetLeft 位置做为目标值即可
鼠标离开某个小 li，就把目标值设为 0
如果点击了某个小 li，就把 li 当前的位置存储起来，做为筋斗云的起始位置

核心 JS 代码：

window.addEventListener('load', function () {
    // 1. 获取元素
    var cloud = document.querySelector('.cloud');
    var nav = document.querySelector('.nav');
    var lis = nav.querySelectorAll('li');
    // 2. 给所有的小li绑定事件
    // 这个current作为筋斗云的起始位置
    var current = 0;
    for (var i = 0; i < lis.length; i+