导航栏筋斗云特效

最新推荐文章于 2022-09-23 15:06:30 发布

Surpass-oneself

最新推荐文章于 2022-09-23 15:06:30 发布

阅读量1.2k

点赞数 1

分类专栏： javascript

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_41882787/article/details/80064907

版权

这篇博客介绍了如何创建一个HTML导航栏，当鼠标经过时，筋斗云会在导航栏中移动。通过分析解觉思路，利用onmouseover、onclick和onmouseout事件，结合鼠标位置的数据存储，实现了鼠标交互时筋斗云的动态效果。

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

这个导航栏的效果非常简单是，在鼠标经过的时候，筋斗云会在导航中运动，一旦鼠标点击之后，筋斗云会停止在导航栏上。

分析解觉思路：
思路首先获取元素再次，有个鼠标onmouseover事件和onclick事件最后是 onmouseout事件
遍历 lis然后执行 onmouseover事件事件处理的过程中我们需要那些数据，一是存储鼠标经过的位置二是存储鼠标离开的位置最后是鼠标点击的位置。只要我们理解在那些阶段，获取那些位置就可以实现这个效果。

<!DOCTYPE html>

<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0; padding: 0;}
ul {list-style:none;}
body {
background-color: #000;
}
.nav {
width: 800px;
height: 42px;
background:url("images/rss.png") no-repeat right center #fff;
margin: 100p

最低0.47元/天解锁文章

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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