javascript--2.导航条>>缓动效果

最新推荐文章于 2021-08-19 15:39:02 发布

w3cgirl

最新推荐文章于 2021-08-19 15:39:02 发布

阅读量669

点赞数

分类专栏： JavaScript 文章标签：导航条筋斗云缓动动画 offsetL

本文链接：https://blog.youkuaiyun.com/sinat_37568115/article/details/56485337

版权

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种利用JavaScript实现的导航条缓动效果。通过鼠标悬停在导航栏的不同选项上时，使得云彩图案平滑地移动到对应位置。文章详细介绍了HTML布局结构、元素定位方式以及JavaScript的核心代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导航条缓动效果

1.效果图

2.html布局

注意：

给ul加绝对定位的原因：

云彩cloud应该放在ul下面，但实际情况：cloud定位后权重高于ul，cloud在ul上面

3.JS部分

原理：鼠标一经过，缓动的目标值target 等于 li 的左边位置（通过offsetLeft获取）

    //原理：鼠标一进过，获得自己左边的位置（offsetLeft）,云彩就知道自己的目标值，该往哪里走 即target的值
    //实现鼠标一放上去，就让云彩滑动，只要不断修改云彩left值就可以，left的值 等于 li的offsetleft值
    var nav = document.getElementById("nav");
    var cloud = nav.children[0];
    var lis = nav.children[1].children;//li有很多，获取lis
    var current =0;//用于存放current的值
    for(var i=0 ;i