这篇博客介绍了如何创建一个HTML导航栏，当鼠标经过时，筋斗云会在导航栏中移动。通过分析解觉思路，利用onmouseover、onclick和onmouseout事件，结合鼠标位置的数据存储，实现了鼠标交互时筋斗云的动态效果。
这个导航栏的效果非常简单是，在鼠标经过的时候，筋斗云会在导航中运动，一旦鼠标点击之后，筋斗云会停止在导航栏上。
分析解觉思路：
思路首先获取元素 再次，有个鼠标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元/天 解锁文章
扫一扫
327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
