Heim >Web-Frontend >HTML-Tutorial >导航菜单底部滑动条跟随效果_html/css_WEB-ITnose
导航菜单底部滑动条跟随效果_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:57:531511Durchsuche
网上昨天学了一个导航条效果 今天手动实现了一下 开心。。。
翠花，上效果图！
实现代码如下（思路见代码）：
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>navdemo1</title> <style> /* 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-height, letter-spacing, color- text-align等) 4.背景(background, border等) 5.其他(animation, transition等) */ * { padding: 0; margin: 0; font-family: 'Microsoft YaHei'; } a{text-decoration:none;} li{list-style:none;} .nav-wrap{position:relative;background-color:#000;} .nav-wrap .nav{width:1000px;margin:0 auto; overflow:hidden;} .nav-wrap .nav li{float:left;} .nav-wrap .nav li a{display:block; height:50px;padding:0 50px;line-height:50px;color:#fff;transition:background-color 0.3s linear;} .nav-wrap .nav li a:hover,.nav-wrap .nav li a.active{background-color:#484646;} .nav-wrap .line{display:block;position:absolute;bottom:0;width:50px;height:2px;background-color:#ff6a00;} </style> <script src="~/Scripts/jquery-1.8.2.js"></script> <script src="~/Scripts/jquery.easing.1.3.js"></script> <script> $(function () { navdeal(); }); //导航条效果处理 //思路： //1.下滑条绝对定位到导航条模块的底部 //2.js控制下滑条 宽度=当前菜单项的宽度 左边距=当前菜单项相对父元素（.nav-wrap）的左偏移 //3.加上easing.js中的弹性效果 var navdeal = function () { var $item_active = $('.nav-wrap .nav li a.active'); var $nav_line = $('.nav-wrap .line'); var item_width = $item_active.outerWidth(); var item_position_left = $item_active.position().left; $nav_line.css({ 'width': item_width, 'margin-left': item_position_left }); //菜单项鼠标移入，移出事件绑定 $('.nav-wrap .nav li a').bind({ mouseover: function () { var item_width = $(this).outerWidth(); var item_position_left = $(this).position().left; $nav_line.stop().animate({ 'width': item_width, 'margin-left': item_position_left }, 800, 'easeOutBounce'); }, mouseout: function () { $nav_line.stop().animate({ 'width': item_width, 'margin-left': item_position_left }, 800, 'easeOutBounce'); } }); } </script></head><body> <div class="nav-wrap"> <ul class="nav"> <li><a href="#" class="active">首页</a></li> <li><a href="#">我的订单</a></li> <li><a href="#">我的购物车</a></li> <li><a href="#">退出</a></li> </ul> <span class="line"></span> </div></body></html> Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML5学习笔记HTML知识备忘录_html/css_WEB-ITnoseNächster Artikel：用HTML5原生实现拖放或排序_html/css_WEB-ITnose