写一个背景随鼠标移动的导航栏

最新推荐文章于 2020-11-11 17:14:44 发布

蓝鲸是鱼

最新推荐文章于 2020-11-11 17:14:44 发布

阅读量463

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_25367937/article/details/106024411

版权

本文介绍如何创建一个导航栏，其背景根据鼠标移动而平滑移动。通过JavaScript实现，利用li元素的offsetLeft属性计算位置，并采用缓动动画公式实现平滑过渡。同时，为了优化性能，作者在动画执行过程中适时清除定时器。

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

写一个背景随鼠标移动的导航栏

导航栏
仿写的一个，原理主要是导航列表项（li）相对容器导航条的左偏移（offsetLeft属性）。
背景有一个缓动效果（移动速度先快后慢），但原本缓动动画的定时器一直没有关闭，觉得有点浪费资源，所以在写的时候把定时器用完就清除了。
leader = leader + (target - leader) / 10; // 缓动动画公式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{ margin: 0; padding: 0;}
        ul{ list-style: none;}
        body{ background-color: #aaa;}
        .nav {
            width: 800px;
            height: 47px;
            background: url(./

最低0.47元/天解锁文章

蓝鲸是鱼

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
写一个背景随鼠标移动的导航栏

写一个背景随鼠标移动的导航栏仿写的一个，原理主要是导航列表项（li）相对容器导航条的左偏移（offsetLeft属性）。背景有一个缓动效果（移动速度先快后慢），但原本缓动动画的定时器一直没有关闭，觉得有点浪费资源，所以在写的时候把定时器用完就清除了。leader = leader + (target - leader) / 10; // 缓动动画公式<!DOCTYPE html><html lang="en"><head> <meta char
复制链接

扫一扫