jQuery Flash动画导航条

原创 已于 2025-06-27 15:31:04 修改 · 852 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #前端

于 2025-04-28 16:48:30 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Flash动画导航条</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f5f5f5;
        }

        .nav-container {
            width: 100%;
            background: linear-gradient(to right, #1e5799, #207cca);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .nav-menu {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            list-style: none;
            padding: 0;
        }

        .nav-item {
            position: relative;
            padding: 15px 25px;
        }

        .nav-link {
            color: white;
            text-decoration: none;
            font-size: 16px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            position: relative;
            transition: all 0.3s ease;
            display: block;
        }

        .nav-link:after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 3px;
            background-color: #ffcc00;
            transition: width 0.3s ease;
        }

        .nav-item:hover .nav-link {
            color: #ffcc00;
        }

        .nav-item:hover .nav-link:after {
            width: 100%;
        }

        .flash-animation {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.3);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.3s ease;
            z-index: -1;
        }

        .nav-item:hover .flash-animation {
            transform: scaleX(1);
        }

        .credit {
            text-align: center;
            margin-top: 30px;
            color: #666;
            font-size: 14px;
        }

        .credit a {
            color: #1e5799;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="nav-container">
        <ul class="nav-menu">
            <li class="nav-item">
                <div class="flash-animation"></div>
                <a href="#" class="nav-link">首页</a>
            </li>
            <li class="nav-item">
                <div class="flash-animation"></div>
                <a href="#" class="nav-link">产品</a>
            </li>
            <li class="nav-item">
                <div class="flash-animation"></div>
                <a href="#" class="nav-link">服务</a>
            </li>
            <li class="nav-item">
                <div class="flash-animation"></div>

            </li>
            <li class="nav-item">
                <div class="flash-animation"></div>
                <a href="#" class="nav-link">关于我们</a>
            </li>
            <li class="nav-item">
                <div class="flash-animation"></div>
                <a href="#" class="nav-link">联系我们</a>
            </li>
        </ul>
    </div>

    <div class="credit">
       
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 鼠标悬停动画效果
            $('.nav-item').hover(
                function() {
                    // 鼠标进入
                    $(this).find('.flash-animation').css('transform', 'scaleX(1)');
                    $(this).find('.nav-link').css('color', '#ffcc00');
                },
                function() {
                    // 鼠标离开
                    $(this).find('.flash-animation').css('transform', 'scaleX(0)');
                    $(this).find('.nav-link').css('color', 'white');
                }
            );

            // 点击导航项添加活动状态
            $('.nav-item').click(function() {
                $('.nav-item').removeClass('active');
                $(this).addClass('active');
            });

            // 添加波纹点击效果
            $('.nav-link').click(function(e) {
                e.preventDefault();

                var x = e.pageX - $(this).offset().left;
                var y = e.pageY - $(this).offset().top;

                var ripple = $('<span class="ripple"></span>');
                ripple.css({
                    'left': x,
                    'top': y
                });

                $(this).append(ripple);

                setTimeout(function() {
                    ripple.remove();
                }, 1000);
            });
        });
    </script>
</body>
</html>

ziblog
关注
jQuery左侧列表导航条鼠标滑过flash动画导航条-20130705
xjwolaile的博客
07-05 204
1、效果及功能说明 左侧列表导航条制作鼠标滑过导航条标签，flash动画导航条展示 2、实现原理 首先导航栏是在被一个块级容器给挡住了在页面加载完成以后会从块级容器里动过一个动画效果向右移动出来，每一个时间间隔是0.05*0.2秒移动在要0.3秒内完成动画效果然后是一个伪类的事件效果当鼠标移动到一个a标签上又会触发一个动画效果a容器会加长20px文字向右移动到-110px并且改变...
使用jQuery实现动画效果
NYHongHong的博客
09-30 1019
jQuery左侧列表导航条鼠标滑过flash动画导航条https://www.mk2048.com/demo/demo_target_desc.php?id=cic1hcj1j jQuery左侧列表导航条制作鼠标滑过导航条标签，flash动画导航条展示。 jquery 弹出层插件 鼠标点击文字获取标题弹出层内容信息https://www.mk2048.com/demo/demo_target_desc.php?id=ciccjbhaa jquery 弹出层插件制作弹出层信息，鼠标点击文字内容信息...
jQuery的应用
伴夏微凉的博客
03-31 7739
jQuery的应用 jQuery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率 jQuery的优势 体积小，压缩后只有100KB左右 强大的选择器 出色的DOM封装 可靠的事件处理机制 出色的浏览器兼容性 使用隐式迭代简...
jQuery
webprevious的博客
08-26 592
jQuery作为JavaScript封装的类库，目的就是为了简化开发者使用JavaScript变得更加方便，最好处就是简化了DOM操作，处理了兼容性 优势： 1.让开发者像css那样访问和操作dom 2.修改css 3.简化JavaScript代码操作 4.事件处理变得简单 5.各种动画效果使用方便 6.让Ajax技术使用方便 7.基于jQuery大量插件 8.自行扩展功能插件 ...
jquery 导航
weixin_34161032的博客
01-10 176
引用：http://www.cnblogs.com/ywqu/archive/2009/08/15/1546559.html 1.jQuery 选项卡界面 / 选项卡结构菜单教程 这种类型的菜单在网页设计与开发中非常著名的。此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单。要非常留心此演示哟，你一定会喜欢上它的。 Preview || Dow...
使用jQuery background-position插件来创建超酷的导航条效果
kvhur的博客
07-23 194
在线演示1   本地下载     原文篇幅较长完整代码及内容请见原文：http://www.gbtags.com/gb/share/5864.htm 在过去的web开发和设计中，大家往往使用flash来创建炫酷的菜单效果，随着js和web技术的发展，现在大家可以使用简单的javascript代码生成同样漂亮的菜单效果，在今天的这个简单教程中，我们将带领大家使用jQuer...
前端基础之Jquery
m0_45442261的博客
11-04 488
href 1.jquery简介 一个JavaScript框架。简化JS开发 JavaScript框架：【本质上就是一些js文件】，封装了js的原生代码而已 由美国人John Resig于【2006】年创建；jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的【封装】 它的设计思想是write less,do more例如实现隔行变色效果，只需一句关键代码$(“tr:even”).css(“background-color”,"#e8f0f2"); jQuery能做的J
打造炫酷jQuery网站底部波浪动态背景特效
weixin_42627459的博客
06-19 489
波浪特效的设计与控制涉及复杂的数学模型和优化策略。通过理解波浪的数学模型和动态变化原理，可以更好地设计出逼真且高效的波浪特效。参数调整和性能优化是实现高质量特效不可或缺的环节，而减少DOM操作和利用Canvas则是提升渲染效率的关键步骤。HTML (HyperText Markup Language) 是构成网页内容的基础。一个标准的 HTML 文档包含<html><head>, 和<body>四个主要部分。声明用于告诉浏览器该页面使用 HTML5 编写，它必须位于文档的第一行。
打造动态交互体验：实现会弹钢琴的jQuery菜单导航
weixin_42514540的博客
07-13 592
在现代Web开发中，JavaScript是构建动态网页不可或缺的脚本语言。然而随着网页交互需求的日益增长，原始的JavaScript代码编写方式逐渐显得冗长和难以维护。此时，jQuery应运而生，以其简洁的语法和强大的功能库极大地简化了JavaScript的代码编写。当需要更细粒度的控制时，可以通过监听音频播放器事件来实现。音频播放器事件包括playpauseendedtimeupdate等。以下是一个简单的自定义事件监听器的示例：// 监听播放器播放事件。
jquery flash动画导航条.zip
11-19
总的来说，"jquery flash动画导航条.zip"提供的资源将帮助开发者创建一个融合了传统Flash动画效果和现代Web技术的导航条。通过合理利用jQuery的便利性、CSS的可视化能力和HTML5的语义特性，可以构建出适应不同设备且...
jquery模仿flash动画导航左右滑动效果
06-06
在本文中，我们将深入探讨如何使用jQuery来实现一个模仿Flash动画的导航栏，该导航栏具有左右滑动的效果。这个效果通常用于网站的顶部菜单，为用户提供动态且吸引人的交互体验。 首先，jQuery是一个轻量级的...
jQuery仿flash导航条鼠标悬停上下文字滑动
10-27
【jQuery仿Flash导航条鼠标悬停上下文字滑动】是一种常见的网页交互效果，它通过JavaScript库jQuery实现，模仿了早期Flash技术中的动态效果。在现代网页设计中，jQuery的广泛使用使得无需Flash插件也能创建出类似的...
html css js网页制作成品——娃娃html+css+js 4页附源码
卡拉米
12-01 75
本文介绍了一个关于中国篆刻艺术的静态网站设计与实现方案。网站采用HTML5+CSS3技术构建，包含首页、关于篆刻、作品展示、历史渊源和联系我们等页面模块。文章详细说明了网站布局结构、程序语言选择、素材处理方法以及文件组织方式，并提供了核心HTML代码示例。网站设计兼容主流浏览器，适合修改为各类主题展示网站。作者还分享了编程学习建议，推荐初学者通过刷题巩固基础，并提供了获取更多前端开发资源的渠道。该网站可作为大学生毕业设计或期末作业的参考模板。
主题切换（1）：css变量的使用（:root）
Z_Wonderful的博客
12-01 416
:root 是一个伪类选择器，它匹配文档的根元素（即 <html> 元素）。使用 :root 定义 CSS 变量（自定义属性）可以让变量具有全局作用域，方便在整个项目中统一管理和动态调整样式
实时记住滚动位置，下次进入页面自动滚动到上次的位置
专注于技术，分享实战经验，探索技术边界，用代码构建更美的数字世界。
11-30 97
摘要：本文演示了一个Vue3组件实现滚动位置记忆功能。通过设置固定高度的滚动容器，在用户滚动时使用sessionStorage记录滚动位置，并在下次进入页面时自动恢复。代码使用Composition API实现，包含数据获取、滚动事件监听和样式设置，适用于需要保持浏览位置的长列表场景。
HTML/CSS 核心考点详解（字节跳动 ToB 中台场景）
2402_87628679的博客
12-01 855
语义化 HTML 就是用有明确含义的标签（如<header><nav><main>）替代无意义的通用标签<div>，让 HTML 结构 “自解释”—— 不用看 CSS/JS，就能看懂页面各部分的功能。块级格式化上下文，是一个 “独立的渲染区域”，区域内的元素布局不受外部影响，同时也不会影响外部元素。可以理解为：BFC 是一个 “隔离的盒子”，盒子里的元素怎么布局，都和盒子外的元素没关系。知识点核心考点实战场景语义化 HTML常用语义标签、结构合理性系统页面布局、模块划分Flex 布局。
DevUI主题系统进阶：CSS-in-JS与暗黑模式无缝切换架构
最新发布
m0_37613794的博客
12-04 703
本文深入解析了华为DevUI主题系统的混合架构实现方案，提出结合CSS-in-JS灵活性与CSS Variables性能优势的创新设计。核心内容包括：1）主题令牌管理算法，实现语义化到具体值的映射；2）运行时主题切换引擎，支持平滑过渡和状态持久化；3）性能优化策略，包括CSS变量作用域隔离和编译时优化。通过MateChat等大型项目验证，该方案显著提升了主题定制能力，使主题切换时间从300ms降至28ms，样式文件体积减少73%。文章还提供了从原理到实践的全套解决方案，包括React集成、组件适配和常见问题
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值