Node.js를 사용하면 Microsoft 공식 웹사이트 탐색 드롭다운 메뉴 effect_javascript 기술과 좋은 호환성을 얻을 수 있습니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Node.js를 사용하면 Microsoft 공식 웹사이트 탐색 드롭다운 메뉴 effect_javascript 기술과 좋은 호환성을 얻을 수 있습니다.

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:40 PM

js드롭다운 메뉴항해마이크로소프트 공식 홈페이지

이 기사의 예에서는 호환성이 좋은 Microsoft 공식 웹사이트 탐색 드롭다운 메뉴 효과의 js 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

Microsoft 공식 웹사이트 탐색 메뉴로 드롭다운 메뉴와 호환되며 Microsoft 공식 웹사이트 탐색 효과가 있습니다. 그런데 IE6에서는 애니메이션 효과도 추가되어 호환됩니다. IE6. 현재 마이크로소프트의 공식 홈페이지가 이용되고 있는데, 정말 좋은 것 같아요.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

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>微软官网导航菜单</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 &#63; currentStyle[attr] : getComputedStyle(obj, false)[attr];
  for(var propName in attr)propName == 'opacity' &#63; (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 &#63; 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 &#63; 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] &#63; 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;
   //还原上一个动作
   flexible();
   if(aDiv[0].style.height==aDiv[1].offsetHeight+'px'){
    flexible();
   }else{
   //当前动作
    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});
   }
   //记住上一个
   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 id="Windows">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 企业版</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 id="Office-产品">Office 产品</h3>
    <ul>
    <li class="lis"><a href="javascript:;">Office 标准版</a></li>
    <li class="lis"><a href="javascript:;">Office 家庭和学生版</a></li>
    <li class="lis"><a href="javascript:;">Office 中小企业版</a></li>
    <li class="lis"><a href="javascript:;">Office 专业版</a></li>
    <li class="lis"><a href="javascript:;">Office 专业增强版</a></li>
    <li class="lis"><a href="javascript:;">Office 企业版</a></li>
    </ul>
    <h3 id="活动与促销">活动与促销</h3>
    <ul>
    <li class="lis"><a href="javascript:;">Office 近期活动与促销</a></li>
    </ul>
   </li>
   </ul>
   <ul class="menuList" style="border-left:1px solid #e3e3e3;">
   <li>
    <h3 id="Office-资源">Office 资源</h3>
    <ul>
    <li class="lis"><a href="javascript:;">Office 购买主页</a></li>
    <li class="lis"><a href="javascript:;">Office 试用版免费下载</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">所有产品</a>
  <div class="list">
  <div>
   <ul class="menuList">
   <li>
    <h3 id="服务器">服务器</h3>
    <ul>
    <li class="lis"><a href="javascript:;">所有服务器产品</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 id="商业应用">商业应用</h3>
    <ul>
    <li class="lis"><a href="javascript:;">UC 统一沟通</a></li>
    <li class="lis"><a href="javascript:;">云计算</a></li>
    <li class="lis"><a href="javascript:;">商业软件平台</a></li>
    <li class="lis"><a href="javascript:;">企业生产力基础架构</a></li>
    </ul>
    <h3 id="开发工具">开发工具</h3>
    <ul>
    <li class="lis"><a href="javascript:;">Visual Studio 开发工具</a></li>
    <li class="lis"><a href="javascript:;">MSDN 开发人员网站</a></li>
    </ul>
    <h3 id="设计与个人体验">设计与个人体验</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 id="个人生活与娱乐产品">个人生活与娱乐产品</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 id="硬件">硬件</h3>
    <ul>
    <li class="lis"><a href="javascript:;">微软硬件首页</a></li>
    <li class="lis"><a href="javascript:;">鼠标</a></li>
    <li class="lis"><a href="javascript:;">键盘</a></li>
    </ul>
    <h3 id="Windows-Phone">Windows Phone</h3>
    <ul>
    <li class="lis"><a href="javascript:;">Windows Phone 首页</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">
  <div>
   <ul class="menuList">
   <li>
    <h3 id="下载中心">下载中心</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 id="最新下载">最新下载</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 id="安全与更新">安全与更新</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">培训与支持</a>
  <div class="list">
  <div>
   <ul class="menuList">
   <li>
    <h3 id="产品支持">产品支持</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 id="活动">活动</h3>
    <ul>
    <li class="lis"><a href="javascript:;">微软活动中心</a></li>
    <li class="lis"><a href="javascript:;">培训</a></li>
    <li class="lis"><a href="javascript:;">微软 IT 课堂</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">
  <div>
   <ul class="menuList">
   <li>
    <h3 id="立即购买">立即购买</h3>
    <ul>
    <li class="lis"><a href="javascript:;">微软产品选购平台首页</a></li>
    <li class="lis"><a href="javascript:;">个人用户选购平台</a></li>
    <li class="lis"><a href="javascript:;">企业用户选购平台</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">解决方案</a>
  <div class="list" style="border-radius:8px 0 8px 8px;right:0;left:auto;">
  <div>
   <ul class="menuList">
   <li>
    <h3 id="合作伙伴解决方案">合作伙伴解决方案</h3>
    <ul>
    <li class="lis"><a href="javascript:;">查找合作伙伴解决方案</a></li>
    </ul>
    <h3 id="企业和组织">企业和组织</h3>
    <ul>
    <li class="lis"><a href="javascript:;">Microsoft Dynamics ERP & CRM</a></li>
    <li class="lis"><a href="javascript:;">大型企业信息化专区</a></li>
    <li class="lis"><a href="javascript:;">教育信息化专区</a></li>
    <li class="lis"><a href="javascript:;">微软中小企业在线体验中心</a></li>
    <li class="lis"><a href="javascript:;">微软正版授权中心</a></li>
    </ul>
   </li>
   </ul>
   <ul class="menuList" style="border-left:1px solid #e3e3e3;">
   <li>
    <h3 id="开发人员和-IT-专业人士">开发人员和 IT 专业人士</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 专业社区</a></li>
    </ul>
    <h3 id="中国案例中心">中国案例中心</h3>
    <ul>
    <li class="lis"><a href="javascript:;">微软中国案例中心</a></li>
    </ul>
    <h3 id="微软技巧与帮助">微软技巧与帮助</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 id="合作伙伴">合作伙伴</h3>
    <ul>
    <li class="lis"><a href="javascript:;">微软合作伙伴网络</a></li>
    <li class="lis"><a href="javascript:;">查找微软合作伙伴</a></li>
    <li class="lis"><a href="javascript:;">微软合作伙伴网络权益概览</a></li>
    <li class="lis"><a href="javascript:;">加入微软合作伙伴网络（MPN）</a></li>
    <li class="lis"><a href="javascript:;">订阅微软行动宝盒（MAPs）</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 id="关于微软">关于微软</h3>
    <ul>
    <li class="lis"><a href="javascript:;">关于微软</a></li>
    <li class="lis"><a href="javascript:;">微软新闻</a></li>
    <li class="lis"><a href="javascript:;">微软在线视频中心</a></li>
    <li class="lis"><a href="javascript:;">投资者关系 (英)</a></li>
    <li class="lis"><a href="javascript:;">招贤纳士</a></li>
    </ul>
   </li>
   </ul>
  </div>
  </div>
 </li>
 </ul>
</div>
</body>
</html>

이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이 되기를 바랍니다.

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.