3d导航菜单效果-JQuery版和原生JS版

2011-10-06　由 Wei 发布　次浏览　
属于：JavaScript　　抢沙发

子曰：不招人妒是庸才 o(∩_∩)o

jQuery版

<!DOCTYPE html PUBLIC "-//W3C//liD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/liD/xhtml1-transitional.lid"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3d导航-jQuery导航效果</title> <meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible"/> <style>  </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script language="javascript"> /*ASdht.js*/ jQuery(document).ready(function () { /* 1st example */ /// wrap inner content of each anchor with first layer and append background layer jQuery("#menu li a").wrapInner('<span class="out"></span>').append('<span class="bg"></span>'); // loop each anchor and add copy of text content jQuery("#menu li a").each(function () { jQuery('<span class="over">' + $(this).text() + '</span>').appendTo(this); }); jQuery("#menu li a").hover(function () { // this function is fired when the mouse is moved over jQuery(".out", this).stop().animate({ 'top': '45px' }, 250); // move down - hide jQuery(".over", this).stop().animate({ 'top': '0px' }, 250); // move down - show jQuery(".bg", this).stop().animate({ 'top': '0px' }, 120); // move down - show }, function () { // this function is fired when the mouse is moved off jQuery(".out", this).stop().animate({ 'top': '0px' }, 250); // move up - show jQuery(".over", this).stop().animate({ 'top': '-45px' }, 250); // move up - hide jQuery(".bg", this).stop().animate({ 'top': '-45px' }, 120); // move up - hide }); /* 2nd example */ jQuery("#menu2 li a").wrapInner('<span class="out"></span>'); jQuery("#menu2 li a").each(function () { jQuery('<span class="over">' + $(this).text() + '</span>').appendTo(this); }); jQuery("#menu2 li a").hover(function () { jQuery(".out", this).stop().animate({ 'top': '45px' }, 200); // move down - hide jQuery(".over", this).stop().animate({ 'top': '0px' }, 200); // move down - show }, function () { jQuery(".out", this).stop().animate({ 'top': '0px' }, 200); // move up - show jQuery(".over", this).stop().animate({ 'top': '-45px' }, 200); // move up - hide }); }); </script> </head> <body> <div id="hdw"> <div id="hd"> <div id="menu2" class="menu"> <ul> <li class="dangqian"><a href="http://www.ahuing.com/">今日团购</a></li> <li><a href="http://www.ahuing.com/">往期团购</a></li> <li><a href="http://www.ahuing.com/">热销商品</a></li> <li><a href="http://www.ahuing.com/">品牌商户</a></li> <li><a href="http://www.ahuing.com/">团购达人</a></li> <li><a href="http://www.ahuing.com/">讨论区</a></li> <li><a href="http://www.ahuing.com/">购物车</a></li> </ul> </div> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

原生JS版

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>3d导航-用原生JS实现jQuery导航效果</title> <style> body { margin:0; background:#66FF99; } ul { padding-left:0; margin:0; } li { list-style:none; } #nav { height:40px; background:#900; margin-top:50px; } #nav ul { width:800px; height:40px; margin:0 auto; } #nav li { float:left; height:40px; } #nav a { float:left; position:relative; height:40px; overflow:hidden; font-size:14px; color:#e0e03a; text-decoration:none; cursor:pointer; } #nav strong { float:left; } #nav span { float:left; padding:0 20px; height:40px; line-height:40px; background:#900; clear:both; } #nav .active,#nav .current span { background:#600; color:#fff; } #nav .current .active { color:#e0e03a; } </style> <script> window.onload=function() { var oDiv=document.getElementById('nav'); var aStrong=oDiv.getElementsByTagName('strong'); var aA=oDiv.getElementsByTagName('a'); var iTarget=oDiv.getElementsByTagName('li')[0].offsetHeight; for(var i=0; i<aStrong.length; i++) { aA[i].style.width=aStrong[i].style.width=aStrong[i].getElementsByTagName('span')[0].offsetWidth+'px'; aStrong[i].style.position='absolute'; aStrong[i].style.top=aStrong[i].style.left=0; aStrong[i].onmouseover=function() { startMove(this, -iTarget); }; aStrong[i].onmouseout=function() { startMove(this, 0); }; } }; function startMove(obj,target) { clearInterval(obj.iTime); obj.iTime=setInterval(function(){ if(obj.offsetTop==target) { clearInterval(obj.iTime); } else { var iSpeed=(target-obj.offsetTop)/4; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); obj.style.top=obj.offsetTop+iSpeed+'px'; } }, 30); } </script> </head> <body> <div id="nav"> <ul> <li class="current"> <a href="http://www.miaov.com"> <strong> <span>首页</span> <span class="active">首页</span> </strong> </a> </li> <li> <a href="http://www.miaov.com/course.html.php"> <strong> <span>前端开发课程</span> <span class="active">前端开发课程</span> </strong> </a> </li> <li> <a href="http://bbs.miaov.com/viewthread.php?tid=952&extra=page%3D1"> <strong> <span>妙味视频教程</span> <span class="active">妙味视频教程</span> </strong> </a> </li> <li> <a href="http://bbs.miaov.com/viewthread.php?tid=994&extra=page%3D1"> <strong> <span>周末班上课安排</span> <span class="active">周末班上课安排</span> </strong> </a> </li> <li> <a href="http://bbs.miaov.com/viewthread.php?tid=775&extra=page%3D1"> <strong> <span>结课标准</span> <span class="active">结课标准</span> </strong> </a> </li> <li> <a href="http://www.miaov.com/contact.html.php"> <strong> <span>联系妙味</span> <span class="active">联系妙味</span> </strong> </a> </li> </ul> </div> </body> </html>

提示：你可以先修改部分代码再运行。