筋斗云导航栏效果（案例）

已于 2022-09-23 15:08:50 修改
阅读量374 收藏 1
点赞数
分类专栏： JavaScript 学习笔记和案例 Web API 文章标签： javascript 前端 vscode css
于 2022-09-23 15:06:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44566194/article/details/127010429
版权
本文通过案例详细介绍了如何使用JavaScript和CSS实现鼠标交互时的筋斗云导航栏效果。当鼠标经过小li元素时，筋斗云会跟随移动；离开时返回原位；点击li元素，筋斗云将停留于点击位置。实现过程涉及动画函数、offsetLeft属性和鼠标事件监听。最终展示了成功实现的动态效果。

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

案例分析

本案例目的实现以下三种效果：

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

因此

① 可以采用动画函数进行制作这个效果

② 先设定筋斗云起始的位置为 0 

③ 鼠标经过某个小 li ，就把当前的小 li 的 offsetLeft 位置作为目标值

④ 鼠标离开这个小 li ，就把目标值设为0 

⑤ 如果点击了某个小 li ，就把当前的位置存起来，作为筋斗云的起始位置<

最低0.47元/天 解锁文章
案例：筋斗云动画效果（导航栏动画）
weixin_50119334的博客
10-08 372
筋斗云动画效果 利用动画函数做动画效果 原先筋斗云起始位置为0 鼠标经过某个li 把当前 li 的 offsetLeft 位置作为目标值即可 鼠标离开某个li ，就把目标值设为0 如果点击了某个li ,就把 li 当前的位置存储起来，作为筋斗云的起始位置 <style> * { padding: 0; margin: 0; } li, a { text-decoration: none;
导航栏筋斗云特效
Surpass-oneself的博客
04-24 1213
这个导航栏的效果非常简单是，在鼠标经过的时候，筋斗云会在导航中运动，一旦鼠标点击之后，筋斗云会停止在导航栏上。分析解觉思路：      思路首先获取元素 再次，有个鼠标onmouseover事件和onclick事件 最后是 onmouseout事件遍历 lis然后 执行 onmouseover事件 事件处理的过程中我们需要那些数据，一是存储鼠标经过的位置 二是存储鼠标离开的位置 最后是鼠标点击的位...
js习题（筋斗云导航栏）
weixin_46611729的博客
10-01 572
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } ul { list-style: none;
（12）筋斗云案例（导航栏醒目显示跟随）
weixin_59598992的博客
02-14 780
鼠标经过某个小li，筋斗云跟着到当前小li位置 鼠标离开这个小li，筋斗云复原为原来的位置 鼠标点击了某个小li，筋斗云就会留在点击这个小li的位置 仍然利用动画函数做动画效果 原先筋斗云的起始位置是0 鼠标经过某个小li，把当前小li的offsetLeft 位置做为目标值即可 ...
JavaScript筋斗云案例
weixin_30929295的博客
08-15 505
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } ...
筋斗云导航效果.rar
10-22
筋斗云导航效果是一种创新的网页设计技巧，它将经典的《西游记》角色筋斗云的形象融入到网站的导航栏中，为用户带来独特的交互体验。这种效果通常是通过JavaScript和CSS技术实现的，使得云朵图形在导航栏内跟随鼠标...
横向滚动(筋斗云特效)jQuery导航代码
09-20
CSS样式也是必不可少的，用来设置导航栏的布局和动画效果。 在JavaScript部分，可以使用jQuery的`.scroll()`或`.swipe()`方法来监听用户的滚动或触摸事件。然后，通过修改元素的`left`或`transform`属性，实现导航...
JavaScript动画案例——筋斗云，手风琴，固定导航栏
流楚丶格念的博客
08-21 4175
文章目录手风琴固定导航栏筋斗云 手风琴 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul { list-style: none; } * { margin: 0; padding: 0; } div {
HTML+JS+CSS筋斗云导航栏效果
qq_45387575的博客
03-14 2827
要求： 1、鼠标经过某个li，筋斗云跟着到当前的位置 2、鼠标离开这个li，筋斗云回到原来的位置 3、鼠标点击了某个li，筋斗云就留在点击这个位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta nam.
JavaScript实现精美个性导航栏筋斗云效果
10-19
主要介绍了JavaScript实现精美个性导航栏筋斗云效果，非常不错，具有参考借鉴价值,需要的朋友可以参考下
22筋斗云案例.zip
06-13
筋斗云实现案例，纯js技术实现，
筋斗云案例
weixin_43608739的博客
06-07 1006
<style> * { margin: 0; padding: 0; } ul { list-style: none; position: relative; } body { ...
“筋斗云”小案例
Devil_lzh的博客
08-21 586
* { margin: 0; padding: 0; } body { background-color: #333; } .box { width: 800px; height: 42px;
JS——筋斗云案例
weixin_30385925的博客
12-01 354
需求： 1、鼠标移动到哪里，云彩移动到哪里 2、鼠标离开，云彩回到原点 3、鼠标离开，云彩回到之前点击的地方 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &l...
导航栏筋斗云的制作
Laok0413的博客
02-20 813
效果实现要求： 筋斗云随着鼠标在哪里停留 就飞到哪 如果没有点击，那么鼠标离开的时候筋斗云飞回原来的位置 如果点击了，筋斗云就留在当前位置，并且当前栏目字体可以变色 分析： 其实就是很简单的animate动画应用，只需要进入animate.js，直接调用函数即可。 但是需要注意的是，如何实现点击之后筋斗云停留在当前位置，如果不点击飞回原来位置？ 这就需要一个变量current来保存当前位置。 最开始var current = 0; 当点击之后，current = this.offsetlef
JS之筋斗云案例
weixin_30596343的博客
12-28 257
需求1:鼠标放到哪个li上面，span对应移动到该li上，移开后，回到原位置需求2:鼠标点击哪个li记录该li标签，移开的时候span回到该记录的li标签上 注意点:记录标签要用到计数器，筋斗云运动的时候，要用到缓动动画 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
筋斗云案例js
winneryy的博客
12-07 322
筋斗云 参考代码
JS 59 筋斗云案例
qq_34620296的博客
11-07 622
一.需求分析: 1.鼠标经过某个li,筋斗云跟着到当前位置 2.鼠标离开某个li,筋斗云复原为原来位置 3.鼠标点击某个li,筋斗云停留在这个li 效果展示: 二.实现思路: 1.利用动画函数做动画效果 2.原来筋斗云起始位置为0 3.鼠标经过某个li,把当前li的offsetLeft作为动画函数的目标值即可 4.鼠标离开li时,把目标设...
b站pink老师JavaScript的PC端网页特效 案例代码——筋斗云案例
weixin_72322475的博客
09-16 1166
b站pink老师JavaScript的PC端网页特效 案例代码——筋斗云案例
筋斗云导航栏动态效果源码及教学解析
资源摘要信息:"筋斗云导航效果" - 知识点一：筋斗云效果概念 筋斗云效果是一种动态的网页设计元素，通常用于导航栏中。该效果以中国古典文化元素“筋斗云”为灵感，通过模拟云朵飘动的动态效果，创造出一种轻盈、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值