jQuery渐变发光导航菜单示例代码

跟大家分享一下具体的实现过程。HTML标记结构：的代码如下： ul class=' animation _ Menu ' Li class=' current ' a href=' # ' Menu 1 Span Menu 1/Span/a/Li href=' # ' Menu 2/Span/a href=' # ' Menu III Span Menu III/Span/a/Li href=' # ' Menu IV Span Menu IV/Span/a/Li/ulss样式：Li的样式：复制代码如下：向左浮动：/*宽度和高度为背景图片*/width : 111 px；高度： 50px；/*将文本设为垂直和水平居中*/line-height : 50px；文本对齐：中心；font-weight:粗体；font-size : 18px；列表样式-type : none；}最初看到的样式：复制代码如下：animation_menu阿利{/*这是我们的背景图片*/background-image : URL(' images/BG-sprite-top menu . png ')；背景-重复：不重复；/* position属性的设置使得内部的跨度可以基于*/position:相对位置进行定位；display:块；/*我们不使用纯黑色*/color : # 292724；文本装饰： none；}悬停后看到的span样式：}复制代码如下：animation _ menulaspan {/*这是我们的背景图片*/background-image : URL(' images/BG-sprite-top menu . png ')；背景-重复：不重复；/*设置块模式显示，将宽度和高度设置为与a相同，并设置绝对位置，使其与a */display:块内的文字重叠；高度： 50px；宽度： 111 px；文本对齐：中心；绝对位置：top : 0；left : 0；color: # FFE2BB}使用sprite技术定位、a、跨各种状态的样式：复制代码如下：/*正常状态下的样式*/。animation_menu阿利{/*通用灰色背景*/background-position : 0-153 px；}/*悬停蓝色高亮背景*/。animation _ menu Li a span { background-position : 0-102 px；}/*链接激活时的样式*/。animation _ menuli.currenta {/*常规灰色高亮背景*/background-position : 0；}/*悬停黄色高亮背景*/。动画_ menuli。当前a span {背景位置： 0-51px；}这就是}css的结尾。让我们看看javascript。最后，JavaScript菜单的渐变效果主要通过控制不透明度来实现。请参见以下代码。复制代码如下：//通过将不透明度设置为0 $('来隐藏span的样式和文本。animation _ menulaspan’)。CSS('不透明度'，' 0 ')；//绑定悬停事件$('。animation _ menulaspan’)。悬停(//mouseon事件函数(){//通过动态将不透明度从0更改为1，span的样式和文本将缓慢显示，覆盖a $ (this)的样式。停止()。动画({ opacity: 1 }。}、//鼠标移出事件函数(){//鼠标移出时动态变为0，这样span就看不到了，a的原始样式也能看到。$(这个)。停止()。动画({ opacity: 0 }，' slow ')；});//绑定click事件，点击当前连接，为li添加当前类。同时，删除currentclass $()。animation _ menulea’)。单击(function () {$(')。animation _ menulea’)。每个(函数(索引，项目){$(项目))。父项()。remove class(' current ')；});$(这个)。父项()。add CLaSS(' current ')；});最后，希望这个jQuery导航菜单能给大家一些启发。