欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)兼容性好的微軟官網(wǎng)導(dǎo)航下拉菜單效果

 更新時(shí)間：2015年09月07日 12:16:23   作者：企鵝  
這篇文章主要介紹了js實(shí)現(xiàn)兼容性好的微軟官網(wǎng)導(dǎo)航下拉菜單效果,涉及JavaScript基于鼠標(biāo)事件實(shí)現(xiàn)頁面樣式變換的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)兼容性好的微軟官網(wǎng)導(dǎo)航下拉菜單效果。分享給大家供大家參考。具體如下：

這是一款微軟官網(wǎng)導(dǎo)航菜單，兼容好的下拉菜單，微軟官網(wǎng)導(dǎo)航效果，在IE6下沒有動(dòng)畫效果，順便也把IE6的效果給加上，兼容IE6。現(xiàn)在微軟的官方網(wǎng)站正在使用，我覺得非常不錯(cuò)。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-microsoft-web-nav-menu-codes/

具體代碼如下：

<!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=utf-8" />
<title>微軟官網(wǎng)導(dǎo)航菜單</title>
<style type="text/css">
body{margin:0px;text-align:left;padding:0px;font:12px/140% Arial,Verdana,"微軟雅黑";background:#d1d1d1;}
ul{margin:0px;padding:0px;list-style-type:none;float:left;}
a:focus {outline:0;}
.nav{width:920px;height:28px;background:#f4f4f4;margin:20px auto;border-radius:5px;}
.nav li{width:auto;line-height:20px;float:left;position:relative;}
.nav li.msMnu_Item a{border:1px solid #f4f4f4;color:#4f4f4f;display:inline-block;padding:3px 10px;position:relative;text-decoration:none;font-size:14px;}
.nav li.msMnu_Item a:hover{border:1px solid #999;background:#e4ecf4;}
.nav li.msMnu_hove a{border:1px solid #999;border-bottom:1px solid #fff;background:#fff;color:#4f4f4f;display:inline-block;padding:3px 10px;position:relative;text-decoration:none;font-size:14px;z-index:1000;}
.list{overflow:hidden;position:absolute;height:0px;top:27px;left:0;border-radius:0 8px 8px 8px;}
.list div{background:#fff;overflow:hidden;padding:12px 0 12px 0;border:1px solid #999;float:left;}
.list ul{padding:0px 10px;}
.list li{margin:0px;padding:0px;width:170px;}
.list li h3{margin:0px;padding:0px;font-size:12px;color:#4f4f4f;border-bottom:1px solid #e3e3e3;line-height:20px;width:100%;float:left;}
.list li ul{width:170px;margin:0px;padding:5px 0;}
.list li ul li.lis a{width:170px;height:22px;color:#0060a6;font-size:12px;line-height:20px;text-decoration:none;margin:0px;padding:0px;text-indent:3px;border:none;}
.list li ul li.lis a:hover{color:#fff;background:#0060a6;}
</style>
<script type="text/javascript">
function Class(oParent, sClass){
 var aElem = oParent.getElementsByTagName('*');
 var aClass = [];
 var i = 0;
 for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);
 return aClass;
};
function css(obj, attr, value){
 if(arguments.length == 2){
  var style = obj.style,
  currentStyle = obj.currentStyle;
  if(typeof attr === 'string')return currentStyle ? currentStyle[attr] : getComputedStyle(obj, false)[attr];
  for(var propName in attr)propName == 'opacity' ? (style.filter = "alpha(opacity=" + attr[propName] + ")", style.opacity = attr[propName] / 100) : style[propName] = attr[propName]; 
 }else if(arguments.length == 3){
  switch(attr){
   case "width":
   case "height":
   case "paddingTop":
   case "paddingRight":
   case "paddingBottom":
   case "paddingLeft":
   case "top":
   case "right":
   case "bottom":
   case "left":
   case "marginTop":
   case "marginRigth":
   case "marginBottom":
   case "marginLeft":
    obj.style[attr] = value + "px";
    break;
   case "opacity":
    obj.style.filter = "alpha(opacity=" + value + ")";
    obj.style.opacity = value / 100;
    break;
   default:
    obj.style[attr] = value
  }
 }
};
function extend(destination, source){
 for (var propName in source) destination[propName] = source[propName];
 return destination
};
function doMove(obj, json, fnEnd){
 clearInterval(obj.timer);
 obj.iSpeed = 0;
 fnEnd = extend({
  type: "buffer",
  callback: function() {}
 }, fnEnd);
 obj.timer = setInterval(function(){
  var iCur = 0,
   iStop = true;
  for(var propName in json){
   iCur = parseFloat(css(obj, propName));
   propName == 'opacity' && (iCur = Math.round(iCur * 100));
   switch(fnEnd.type){
    case 'buffer':
     obj.iSpeed = (json[propName] - iCur) / 3;
     obj.iSpeed = obj.iSpeed > 0 ? Math.ceil(obj.iSpeed) : Math.floor(obj.iSpeed);
     json[propName] == iCur || (iStop = false, css(obj, propName, iCur + obj.iSpeed));
     break;
    case 'elasticity':
     obj.iSpeed += (json[propName] - iCur) / 3;
     obj.iSpeed *= 0.75;
     Math.abs(json[propName] - iCur) <= 1 && Math.abs(obj.iSpeed) <= 1 ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed));
     break;
    case 'accelerate':
     obj.iSpeed = obj.iSpeed + 3;
     iCur >= json[propName] ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed));
    break;
   }
  }
  if(iStop){
   clearInterval(obj.timer);
   obj.timer = null;
   obj.iSpeed = 0;
   fnEnd.callback(); 
  }
 },30);
};
</script>
<script type="text/javascript">
window.onload = function(){
 var aMenu = Class(document, 'menu');
 var aList = Class(document, 'list');
 var i = iNow = zIndex = 0;
 for(i=0;i<aMenu.length;i++){
  aMenu[i].index = i;
  aMenu[i].onclick = function(e){
   var oEvent = e || event;
   var aDiv = this.parentNode.getElementsByTagName('div');
   var aMenuList = Class(this.parentNode,'menuList');
   var iWidth = aMenuList.length * aMenuList[0].offsetWidth + 3;
   //還原上一個(gè)動(dòng)作
   flexible();
   if(aDiv[0].style.height==aDiv[1].offsetHeight+'px'){
    flexible();
   }else{
   //當(dāng)前動(dòng)作
    this.parentNode.className = 'msMnu_hove';
    aDiv[0].style.zIndex = zIndex++;
    if(aMenuList.length>1)aDiv[0].style.width = iWidth + 'px';
    doMove(aDiv[0], {height:aDiv[1].offsetHeight});
   }
   //記住上一個(gè)
   iNow = this.index;
   oEvent.cancelBubble = true;
  };
 }
 document.onclick = function(){flexible();};
 function flexible(){
  aList[iNow].parentNode.className = 'msMnu_Item';
  aList[iNow].style.zIndex = 0;
  doMove(aList[iNow], {height:0});
 }
};
</script>
</head>
<body>
<div class="nav">
 <ul>
  <li class="msMnu_Item">
  <a href="javascript:;" class="menu">Windows</a>
  <div class="list">
   <div>
   <ul class="menuList">
   <li>
    <h3>Windows</h3>
    <ul>
    <li class="lis"><a href="javascript:;">Windows 7</a></li>
    <li class="lis"><a href="javascript:;">Windows Vista</a></li>
    <li class="lis"><a href="javascript:;">Windows XP</a></li>
    <li class="lis"><a href="javascript:;">Windows 企業(yè)版</a></li>
    <li class="lis"><a href="javascript:;">Windows Phone</a></li>
    <li class="lis"><a href="javascript:;">Internet Explorer 8</a></li>
    </ul>
   </li>
   </ul>
  </div>
  </div>
 </li>
 <li class="msMnu_Item">
  <a href="javascript:;" class="menu">Office</a>
  <div class="list">
  <div>
   <ul class="menuList">
   <li>
    <h3>Office 產(chǎn)品</h3>
    <ul>
    <li class="lis"><a href="javascript:;">Office 標(biāo)準(zhǔn)版</a></li>
    <li class="lis"><a href="javascript:;">Office 家庭和學(xué)生版</a></li>
    <li class="lis"><a href="javascript:;">Office 中小企業(yè)版</a></li>
    <li class="lis"><a href="javascript:;">Office 專業(yè)版</a></li>
    <li class="lis"><a href="javascript:;">Office 專業(yè)增強(qiáng)版</a></li>
    <li class="lis"><a href="javascript:;">Office 企業(yè)版</a></li>
    </ul>
    <h3>活動(dòng)與促銷</h3>
    <ul>
    <li class="lis"><a href="javascript:;">Office 近期活動(dòng)與促銷</a></li>
    </ul>
   </li>
   </ul>
   <ul class="menuList" style="border-left:1px solid #e3e3e3;">
   <li>
    <h3>Office 資源</h3>
    <ul>
    <li class="lis"><a href="javascript:;">Office 購買主頁</a></li>
    <li class="lis"><a href="javascript:;">Office 試用版免費(fèi)下載</a></li>
    <li class="lis"><a href="javascript:;">Office for Mac 2011</a></li>
    <li class="lis"><a href="javascript:;">Office Web Apps</a></li>
    <li class="lis"><a href="javascript:;">Office 更新和程序下載</a></li>
    </ul>
   </li>
   </ul>
  </div>
  </div>
 </li>
 <li class="msMnu_Item">
  <a href="javascript:;" class="menu">所有產(chǎn)品</a>
  <div class="list">
  <div>
   <ul class="menuList">
   <li>
    <h3>服務(wù)器</h3>
    <ul>
    <li class="lis"><a href="javascript:;">所有服務(wù)器產(chǎn)品</a></li>
    <li class="lis"><a href="javascript:;">Lync Server</a></li>
    <li class="lis"><a href="javascript:;">Windows Server</a></li>
    <li class="lis"><a href="javascript:;">Windows Small Business Server</a></li>
    <li class="lis"><a href="javascript:;">Windows Home Server</a></li>
    <li class="lis"><a href="javascript:;">Windows HPC Server</a></li>
    <li class="lis"><a href="javascript:;">SQL Server</a></li>
    </ul>
   </li>
   </ul>
   <ul class="menuList" style="border-left:1px solid #e3e3e3;">
   <li>
    <h3>商業(yè)應(yīng)用</h3>
    <ul>
    <li class="lis"><a href="javascript:;">UC 統(tǒng)一溝通</a></li>
    <li class="lis"><a href="javascript:;">云計(jì)算</a></li>
    <li class="lis"><a href="javascript:;">商業(yè)軟件平臺(tái)</a></li>
    <li class="lis"><a href="javascript:;">企業(yè)生產(chǎn)力基礎(chǔ)架構(gòu)</a></li>
    </ul>
    <h3>開發(fā)工具</h3>
    <ul>
    <li class="lis"><a href="javascript:;">Visual Studio 開發(fā)工具</a></li>
    <li class="lis"><a href="javascript:;">MSDN 開發(fā)人員網(wǎng)站</a></li>
    </ul>
    <h3>設(shè)計(jì)與個(gè)人體驗(yàn)</h3>
    <ul>
    <li class="lis"><a href="javascript:;">Expression</a></li>
    <li class="lis"><a href="javascript:;">Silverlight</a></li>
    </ul>
   </li>
   </ul>
   <ul class="menuList" style="border-left:#e3e3e3;">
   <li>
    <h3>個(gè)人生活與娛樂產(chǎn)品</h3>
    <ul>
    <li class="lis"><a href="javascript:;">DirectX （英）</a></li>
    <li class="lis"><a href="javascript:;">微軟拼音輸入法</a></li>
    <li class="lis"><a href="javascript:;">Skype</a></li>
    </ul>
    <h3>硬件</h3>
    <ul>
    <li class="lis"><a href="javascript:;">微軟硬件首頁</a></li>
    <li class="lis"><a href="javascript:;">鼠標(biāo)</a></li>
    <li class="lis"><a href="javascript:;">鍵盤</a></li>
    </ul>
    <h3>Windows Phone</h3>
    <ul>
    <li class="lis"><a href="javascript:;">Windows Phone 首頁</a></li>
    <li class="lis"><a href="javascript:;">應(yīng)用與下載</a></li>
    </ul>
   </li>
   </ul>
  </div>
  </div>
 </li>
 <li class="msMnu_Item">
  <a href="javascript:;" class="menu">下載</a>
  <div class="list">
  <div>
   <ul class="menuList">
   <li>
    <h3>下載中心</h3>
    <ul>
    <li class="lis"><a href="javascript:;">微軟中國下載中心</a></li>
    <li class="lis"><a href="javascript:;">Windows 下載</a></li>
    <li class="lis"><a href="javascript:;">Office 下載</a></li>
    <li class="lis"><a href="javascript:;">Server 下載</a></li>
    <li class="lis"><a href="javascript:;">Office Marketplace 下載</a></li>
    </ul>
   </li>
   </ul>
   <ul class="menuList" style="border-left:1px solid #e3e3e3;">
   <li>
    <h3>最新下載</h3>
    <ul>
    <li class="lis"><a href="javascript:;">Internet Explorer 8</a></li>
    <li class="lis"><a href="javascript:;">Internet Explorer 9</a></li>
    <li class="lis"><a href="javascript:;">Office 2010 試用版</a></li>
    <li class="lis"><a href="javascript:;">Silverlight</a></li>
    <li class="lis"><a href="javascript:;">Windows 7 Service Pack 1</a></li>
    </ul>
   </li>
   </ul>
  </div>
  </div>
 </li>
 <li class="msMnu_Item">
  <a href="javascript:;" class="menu">安全與更新</a>
  <div class="list">
  <div>
   <ul class="menuList">
   <li>
    <h3>安全與更新</h3>
    <ul>
    <li class="lis"><a href="javascript:;">安全中心首頁</a></li>
    <li class="lis"><a href="javascript:;">Microsoft Update</a></li>
    <li class="lis"><a href="javascript:;">Office Update</a></li>
    <li class="lis"><a href="javascript:;">微軟安全軟件</a></li>
    <li class="lis"><a href="javascript:;">惡意軟件刪除工具</a></li>
    </ul>
   </li>
   </ul>
  </div>
  </div>
 </li>
 <li class="msMnu_Item">
  <a href="javascript:;" class="menu">培訓(xùn)與支持</a>
  <div class="list">
  <div>
   <ul class="menuList">
   <li>
    <h3>產(chǎn)品支持</h3>
    <ul>
    <li class="lis"><a href="javascript:;">幫助與支持首頁</a></li>
    <li class="lis"><a href="javascript:;">Windows 幫助</a></li>
    <li class="lis"><a href="javascript:;">Office 幫助</a></li>
    <li class="lis"><a href="javascript:;">TechNet 支持</a></li>
    <li class="lis"><a href="javascript:;">MSDN 支持</a></li>
    </ul>
   </li>
   </ul>
   <ul class="menuList" style="border-left:1px solid #e3e3e3;">
   <li>
    <h3>活動(dòng)</h3>
    <ul>
    <li class="lis"><a href="javascript:;">微軟活動(dòng)中心</a></li>
    <li class="lis"><a href="javascript:;">培訓(xùn)</a></li>
    <li class="lis"><a href="javascript:;">微軟 IT 課堂</a></li>
    <li class="lis"><a href="javascript:;">微軟在線培訓(xùn)及認(rèn)證</a></li>
    </ul>
   </li>
   </ul>
  </div>
  </div>
 </li>
 <li class="msMnu_Item">
  <a href="javascript:;" class="menu">立即購買</a>
  <div class="list">
  <div>
   <ul class="menuList">
   <li>
    <h3>立即購買</h3>
    <ul>
    <li class="lis"><a href="javascript:;">微軟產(chǎn)品選購平臺(tái)首頁</a></li>
    <li class="lis"><a href="javascript:;">個(gè)人用戶選購平臺(tái)</a></li>
    <li class="lis"><a href="javascript:;">企業(yè)用戶選購平臺(tái)</a></li>
    <li class="lis"><a href="javascript:;">特別優(yōu)惠</a></li>
    <li class="lis"><a href="javascript:;">批量許可授權(quán)</a></li>
    </ul>
   </li>
   </ul>
  </div>
  </div>
 </li>
 <li class="msMnu_Item">
  <a href="javascript:;" class="menu">解決方案</a>
  <div class="list" style="border-radius:8px 0 8px 8px;right:0;left:auto;">
  <div>
   <ul class="menuList">
   <li>
    <h3>合作伙伴解決方案</h3>
    <ul>
    <li class="lis"><a href="javascript:;">查找合作伙伴解決方案</a></li>
    </ul>
    <h3>企業(yè)和組織</h3>
    <ul>
    <li class="lis"><a href="javascript:;">Microsoft Dynamics ERP &amp; CRM</a></li>
    <li class="lis"><a href="javascript:;">大型企業(yè)信息化專區(qū)</a></li>
    <li class="lis"><a href="javascript:;">教育信息化專區(qū)</a></li>
    <li class="lis"><a href="javascript:;">微軟中小企業(yè)在線體驗(yàn)中心</a></li>
    <li class="lis"><a href="javascript:;">微軟正版授權(quán)中心</a></li>
    </ul>
   </li>
   </ul>
   <ul class="menuList" style="border-left:1px solid #e3e3e3;">
   <li>
    <h3>開發(fā)人員和 IT 專業(yè)人士</h3>
    <ul>
    <li class="lis"><a href="javascript:;">MSDN</a></li>
    <li class="lis"><a href="javascript:;">TechNet</a></li>
    <li class="lis"><a href="javascript:;">IT 專業(yè)社區(qū)</a></li>
    </ul>
    <h3>中國案例中心</h3>
    <ul>
    <li class="lis"><a href="javascript:;">微軟中國案例中心</a></li>
    </ul>
    <h3>微軟技巧與幫助</h3>
    <ul>
    <li class="lis"><a href="javascript:;">微軟家庭館</a></li>
    <li class="lis"><a href="javascript:;">微軟工作館</a></li>
    </ul>
   </li>
   </ul>
  </div>
  </div>
 </li>
 <li class="msMnu_Item">
  <a href="javascript:;" class="menu">合作伙伴</a>
  <div class="list" style="border-radius:8px 0 8px 8px;right:0;left:auto;">
  <div>
   <ul class="menuList">
   <li>
    <h3>合作伙伴</h3>
    <ul>
    <li class="lis"><a href="javascript:;">微軟合作伙伴網(wǎng)絡(luò)</a></li>
    <li class="lis"><a href="javascript:;">查找微軟合作伙伴</a></li>
    <li class="lis"><a href="javascript:;">微軟合作伙伴網(wǎng)絡(luò)權(quán)益概覽</a></li>
    <li class="lis"><a href="javascript:;">加入微軟合作伙伴網(wǎng)絡(luò)（MPN）</a></li>
    <li class="lis"><a href="javascript:;">訂閱微軟行動(dòng)寶盒（MAPs）</a></li>
    </ul>
   </li>
   </ul>
  </div>
  </div>
 </li>
 <li class="msMnu_Item">
  <a href="javascript:;" class="menu">關(guān)于微軟</a>
  <div class="list" style="border-radius:8px 0 8px 8px;right:0;left:auto;">
  <div>
   <ul class="menuList">
   <li>
    <h3>關(guān)于微軟</h3>
    <ul>
    <li class="lis"><a href="javascript:;">關(guān)于微軟</a></li>
    <li class="lis"><a href="javascript:;">微軟新聞</a></li>
    <li class="lis"><a href="javascript:;">微軟在線視頻中心</a></li>
    <li class="lis"><a href="javascript:;">投資者關(guān)系 (英)</a></li>
    <li class="lis"><a href="javascript:;">招賢納士</a></li>
    </ul>
   </li>
   </ul>
  </div>
  </div>
 </li>
 </ul>
</div>
</body>
</html>

希望本文所述對大家的JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評論