jQuery实现鼠标悬浮导航菜单底部出现动画横线的代码实例
本章节分享一段代码实例，它实现了鼠标悬浮，导航菜单底部出现动画横条的效果。
代码实例如下:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.gaodaima.com/" /> <title>搞代码</title> <style> * { margin: 0; padding: 0; list-style: none; } img { border: 0; } .header { width: 100%; background: #F5F5F5; } .nav { width: 1000px; margin: 0 auto; overflow: hidden; } .nav ul li { height: 40px; line-height: 40px; float: left; padding: 10px 5px; margin: 0px 5px; position: relative; } .nav ul li a { color: #666; font-family: 'Microsoft Yahei'; font-size: 14px; text-decoration: none; } .nav ul li a:hover { color: #000; text-decoration: none; } .nav ul li span { display: block; position: absolute; width: 0px; height: 0px; background: #1FAEFF; top: 58px; left: 50%; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(function () { $('.nav li').hover(function () { $('span', this).stop().css('height', '2px'); $('span', this).animate({ left: '0', width: '100%', right: '0' }, 200); }, function () { $('span', this).stop().animate({ left: '50%', width: '0' }, 200); }); }); </script> </head> <body> <div class="header"> <div class="nav"> <ul> <li><a>首页</a><span></span></li> <li><a>菜单导航</a><span></span></li> <li><a>tab标签</a><span></span></li> <li><a>jquery特效</a><span></span></li> <li><a>gaodaima.com</a><span></span></li> </ul> </div> </div> </body> </html> |
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.$(function () {})，当文档结构完全加载完毕再去执行函数中的代码。
（2）.$('.nav li').hover(function () {}，function(){}）,规定鼠标悬浮和离开执行的函数。
（3）.$('span', this).stop().css('height', '2px')，底部线条其实就是span元素，设置线条的高度为2px，后面添加stop()方法是为了防止动画多次重复执行的现象，大家可以把stop方法去掉连续多次移入移出查看效果。
（4）.$('span', this).animate({ left: '0',
width: '100%',
right: '0'
}, 200)，以动画方式设置底部线条的尺寸和位置。
原创文章，转载请注明： 转载自搞代码
本文链接地址: jQuery实现鼠标悬浮导航菜单底部出现动画横线的代码实例
微信 赏一包辣条吧~
支付宝 赏一听可乐吧~
发表评论