jQuery根据滚动方向做导航条动画

最新推荐文章于 2022-08-11 17:04:05 发布
最新推荐文章于 2022-08-11 17:04:05 发布
阅读量1.1k 收藏 2
点赞数 1
分类专栏： jQuery 文章标签： jquery 导航 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/macanfa/article/details/51763381
版权
本文介绍了如何使用jQuery根据页面滚动方向实现导航条的隐藏和显示动画效果。通过监听scroll事件，结合scrollTop方法和addClass、removeClass方法，动态切换导航条的动画类，达到提升用户体验的目的。
摘要由CSDN通过智能技术生成

目标：

实现jQuery判断滚动条方向做导航条动画：向下滚动隐藏导航条，向上滚动显示导航条！

效果图：

jQuery判断滚动条方向做导航条动画

实现思路：

先静态布局好HTML结构，使用伪类：hover模拟动画效果，再使用jQuery 控制动画类的切换来实现效果！

代码实现：

HTML：

<!-- 实现原理：看js源码！切换类 -->
    <div class="top">
      <div class="main">
        <div class="logo img">
          假装有LOGO
        </div>
        <div class="nav">
          <ul>
            <li><a href="#">首页</a></li>
            <li class="l2"><a href="#">课程</a></li>
            <li class="l2"><a href="#">互撸娃</a></li>
            <li>
最低0.47元/天 解锁文章
马灿发
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery插件实现导航栏动画效果
快乐编程，意境自成
02-14 1668
给导航增加动画效果，可以让网页看起来更加友好 需要引用三个插件： js/jquery-1.2.6.min.js js/jquery.kwicks-1.5.1.pack.js js/jquery.easing.1.3.js 实现的代码如下： 导航菜单 *{margin:0; padding:0; font-size:14px;} a{color:#333;text-deco
JQUERY动画导航
08-29
JQUERY漂亮动画导航，个人收藏的，分享给大家，建议使用
jquery做导航条动画
weixin_41963300的博客
09-06 307
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;jq做导航动画&lt;/title&gt; &lt;style&gt; *{ padding:
jQuery基于滚动的动画简介
08-08 179
网络每天都在变化。 新技术和新技术应运而生。 因此，网页设计师和前端开发人员必须熟悉许多最新的网页设计趋势。 视差滚动，固定页眉，平面设计，一页网站和动画是当前最热门的Web趋势。 在本教程中，我们将介绍使用CSS和jQuery的基于滚动的动画和效果。 在本演示中可以查看我们将要创建的四个效果。 但是在获得效果之前，我们先做一个简短的介绍。 注意：本教程中使用的代码可以通过对象缓存和CSS...
前端练习--奇奇动漫导航条（通过背景图设置）
comegoing_xin_lv的博客
08-11 730
通过背景图方式对导航条设置
jQuery火焰灯动画导航条
04-07
"jQuery火焰灯动画导航条"是一种独特的设计，旨在提升用户体验，通过动态视觉效果吸引用户的注意力。这种导航条利用了jQuery库的强大力量，以及两个特定的插件：EasySlider和LavaLamp，为网页添加了互动性和吸引力。...
jQuery实现带滚动线条导航效果的方法
10-24
总的来说，实现带滚动线条的导航效果主要涉及HTML结构、CSS样式和jQuery事件监听及动画操作。通过理解这些基础概念和技术，你可以自定义和优化此效果，以适应不同项目的需求。这不仅提升了界面的视觉吸引力，也增强...
jquery图标文字动画切换导航条
06-06
本文将深入探讨如何使用jQuery库创建一个具有图标和文字切换效果的动态导航条，实现鼠标滑过时图标与背景的上下滚动动画以及背景与文字的切换效果。 首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件...
jQuery实现页面向下滚动后显示隐藏导航条
06-05
在网页设计中，导航条是用户浏览网站时的重要指引元素，通常位于页面顶部。随着页面内容的增多，为了保持...通过不断实践和优化，你将更好地掌握jQuery实现页面向下滚动后显示隐藏导航条的技巧，提升你的前端开发技能。
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
12-11
在本文中，我们将探讨如何利用 `scrollTop` 实现根据滚动像素显示或隐藏顶部导航条的效果。 首先，`scrollTop` 的基本语法是 `$(selector).scrollTop(offset)`。这里的 `selector` 是选择器，用于选取需要操作的...
jQuery导航条动画特效.zip
07-04
jQuery导航条动画特效
6种jQuery导航栏滑动动画效果
11-13
6种jQuery导航栏滑动动画效果
原生js实现导航条动画
逍遥的码农的博客
05-13 353
原生js实现毛毛虫导航 直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> * { margin
jQuery实现动画效果和导航栏动态显示
1900's 88 keys的博客
01-04 1423
效果 淡入淡出 fadeOut([speed],[easing],[fn])通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数 修改style中的opacity的值由display:block ~ 0 ~ 1 参数： speed:预定字符串(“slow”,“normal”, or “fast”)或者指定数值 easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" fn:回调函数 // 点击按钮div慢慢淡出 $('#b
一个导航栏带简单动画效果
xkdamowang的博客
09-30 1486
前端学习中+_+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>二级页面</title> <style type="text/css"> *{
导航条中的游标随着导航滑动而滑动
一息若存-奋斗不息
04-04 1146
/**  * 设置每个标题占的宽度  *  */ private void initTabLineWidth() {        //得到屏幕总宽度         DisplayMetrics dpMetrics = new DisplayMetrics();         getWindow().getWindowManager().getDefaultDispla
多种类型的导航条制作【css3,jquery】
Wendy
09-16 2843
导航条的使用很广，每个网站都会做出具有自己特色的导航条。最近特地去了解了各种类型的导航条，比如具有高亮显示的导航条，中英文互相切换的导航条，具有弹性动画的导航条，甚至是具有摩擦运动动画的导航条（文字下面有横线）等。每种导航条都有自己的特色，比如高亮显示的导航条看起来比较简单，但是视觉效果还不错，具有动画效果的导航条在视觉上也是有很好的效果。 接下来将会一一介绍4种应用比较广的导航条，即：
JavaScript 九九乘法表?
wxt_wjc的博客
01-11 719
<!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-...
jQuery之动画效果
ajwqb06628的专栏
12-08 753
jQuery之动画效果 1、show()显示效果 　　语法：show(speed,callback)　　Number/String,Function　speend为动画执行时间，单位为毫秒。也可以为slow","normal","fast"　callback可选,...
jquery 美化滚动条
最新发布
07-08
要使用jQuery美化滚动条，你可以使用一些第三方插件。以下是一种常用的方法，使用了"perfect-scrollbar"插件： 1. 引入jQuery库和"perfect-scrollbar"插件的文件： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.5.1/css/perfect-scrollbar.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.5.1/perfect-scrollbar.min.js"></script> ``` 2. 创建一个容器元素，用于包裹需要添加滚动条的内容： ```html <div class="scroll-container"> <!-- 内容 --> </div> ``` 3. 初始化滚动条插件，并应用样式： ```javascript $(document).ready(function() { $('.scroll-container').perfectScrollbar(); }); ``` 4. 可选：自定义滚动条的样式： ```css .scroll-container { /* 定义容器的高度和宽度 */ height: 300px; width: 100%; } /* 自定义滚动条的样式 */ .ps__rail-x, .ps__rail-y { /* 滚动条的尺寸和颜色 */ background-color: #f1f1f1; opacity: 0.8; } .ps__thumb-x, .ps__thumb-y { /* 滚动条拖动块的尺寸和颜色 */ background-color: #888; } ``` 这样，你就能使用jQuery和"perfect-scrollbar"插件来美化滚动条了。记得在实际项目中，根据需求进行相应的样式调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值