jquery滑动导航条无BUG写法
这种导航条写法，我网上搜了一下类似的：测试过大多是有BUG。我这个是我自已写的，分享给大家！注意：原理这个很重要，这个特效只要原理搞明白了，实现起来就是很容易的！
直接写代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #dh{ width: 100%; height: 48px; background: #01204F; } #dh ul{ width: 980px; height: 48px; border-left: 1px solid darkviolet; border-right: 1px solid darkviolet; margin: 0 auto; position: relative; } #dh ul li{ list-style: none; float: left; } #dh ul li a{ height: 48px; padding: 0 10px ; color: #FFFFFF; text-align: center; font-size: 16px; line-height: 48px; display: inline-block; text-decoration: none; position: relative; z-index: 2; } #dh ul li a.sy{ height: 48px; width: 48px; } #dh ul .ssk{ position: absolute; top: 0; left: 0; height: 48px; width: 48px; background: #CC0000; } </style> <script src="../tu/jquery-1.11.3.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('li').mouseenter(function(){ $('.ssk').stop().animate({left:$(this).offset().left-$('li').eq(0).offset().left},600) $('.ssk').css({width:$(this).width()}); }) $('li').mouseleave(function(){ $('.ssk').stop().animate({left:'0'},600); $('.ssk').css({width:'48px'}); }) }) </script> </head> <body> <div id="dh"> <ul> <li><a href="" class="sy" style="background: #CC0000;">首页</a></li> <li><a href="">要闻</a></li> <li><a href="">视频</a></li> <li><a href="">娱乐新闻</a></li> <li><a href="">财经</a></li> <li><a href="">游戏</a></li> <li><a href="">体育</a></li> <li><a href="">军事</a></li> <li><a href="">NBA</a></li> <li><a href="">国际</a></li> <li><a href="">科技</a></li> <li><a href="">财经</a></li> <li><a href="">汽车</a></li> <li><a href="">时尚</a></li> <div class="ssk"></div> </ul> </div> </body> </html> 上面代码效果静态图片：
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知