鼠标悬浮具有背景动画跟随效果的导航菜单
分类:实例代码
本章节分享一段代码实例,它实现了鼠标悬浮,导航背景跟随效果。
这样的导航菜单当前算是比较流行的,动感且美观,代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> html { overflow-y: auto; overflow-x: hidden; min-width: 100%; } body, p, html { margin: 0; padding: 0; } ul, li, img { margin: 0; padding: 0; list-style: none; border: none; vertical-align: middle; } a { color: #333; text-decoration: none; } body { background: #000; } .head { position: relative; background: #fff; z-index: 2; } .head-main, .content-main, .foot-main { width: 1024px; margin: 0 auto; position: relative; } .head-main { height: 60px; line-height: 60px; } .head-main .logo { width: 135px; height: 60px; position: absolute; z-index: 10; } .head-main .menu { position: relative; } .head-main .menu li { width: 120px; height: 60px; float: left; line-height: 60px; } .head-main .menu li > a, .head-main .menu li span.infor { display: inline-block; width: 120px; height: 60px; line-height: 60px; text-align: center; position: absolute; z-index: 100001; font-size: 14px; } .head-main .menu li.active > a { color: #fff; background: #fbb432; } .head-main .menu li span.infor { line-height: 22px; } .head-main .menu li span.infor span { font-size: 14px; color: #333; position: relative; top: 15px; } .head-main .menu li span.infor a { color: #333; position: relative; top: 8px; } .head-main .menu li.active span.infor { background: #fbb432; } .head-main .menu li.active span.infor span { color: #fff; } .head-main .menu li.active span.infor a { color: #fff; } .head-main .menu li:hover a { color: #fff; } .head-main .menu li:hover span.infor span { color: #fff; } .head-main .menu li:hover span.infor a { color: #fff; } #hover-active { background: #fbb432; position: absolute; top: 0; height: 60px; width: 120px; z-index: 10; } </style> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script> function move(obj, json, fn) { clearInterval(obj.iTimer); var cur = 0; obj.iTimer = setInterval(function() { var ismove = true; for (var attr in json) { iTarge = json; if (attr == "opacity") { cur = Math.round(css(obj, 'opacity') * 100); } else { cur = parseInt(css(obj, attr)); } var speed = (iTarge - cur) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (cur != iTarge) { ismove = false; if (attr == 'opacity') { obj.style.opacity = (cur + speed) / 100; obj.style.filter = 'alpha(opacity=' + (cur + speed) + ')'; } else { obj.style = cur + speed + "px"; } } } if (ismove == true) { clearInterval(obj.iTimer); fn && fn.call(obj) } }, 5) } function css(obj, attr) { if (obj.currentStyle) { return obj.currentStyle; } else { return getComputedStyle(obj, false); } } var Methods = { init: function(_this) { ha = $("#hover-active"); iWidth = ha.width(); Oli = _this.find("li"); active = _this.find("li.active"); ha[0].style.left = active.offset().left - _this.offset().left + "px"; Methods.hover(_this) }, hover: function(_this) { Oli.each(function(i) { $(this).hover( function() { move(ha[0], { left: i * iWidth }, function() {}); }, function() { move(ha[0], { left: parseInt(active.offset().left - _this.offset().left) }, function() {}); } ) }) } }; $(document).ready(function () { Methods.init($("#menu")); }) </script> </head> <body> <div class="head"> <div class="head-bg"></div> <div class="head-main"> <div class="logo left"></div> <ul class="menu right clearfix" id="menu"> <div class="hover-active" id="hover-active"></div> <li class="active"> <a href="#">首页</a> </li> <li> <a href="#">前端教程网</a> </li> <li> <a href="#">div教程</a> </li> <li> <a href="#">css3教程</a> </li> <li> <a href="#">ajax教程</a> </li> <li> <a href="#">js教程</a> </li> <li> <a href="#">pipipi.net</a> </li> </ul> </div> </div> </body> </html>
鼠标悬浮具有背景动画跟随效果的导航菜单,这样的场景在实际项目中还是用的比较多的,关于鼠标悬浮具有背景动画跟随效果的导航菜单就介绍到这了。
鼠标悬浮具有背景动画跟随效果的导航菜单属于前端实例代码,有关更多实例代码大家可以查看。